Skip to content
Avatar of openaiopenai/openai-assistants-quickstart

OpenAI Assistants Quickstart

A quick-start template using the OpenAI Assistants API with Next.js built by OpenAI

Framework
Use Case
OpenAI Assistants Screenshot

OpenAI Assistants API Quickstart

A quick-start template using the OpenAI Assistants API with Next.js.

Quickstart Setup

1. Clone repo

git clone https://github.com/openai/openai-assistants-quickstart.git
cd openai-assistants-quickstart

2. Set your OpenAI API key

export OPENAI_API_KEY="sk_..."

(or in .env.example and rename it to .env).

3. Install dependencies

npm install

4. Run

npm run dev

5. Navigate to http://localhost:3000.

Deployment

You can deploy this project to Vercel or any other platform that supports Next.js.

Overview

This project is intended to serve as a template for using the Assistants API in Next.js with streaming, tool use (code interpreter and file search), and function calling. While there are multiple pages to demonstrate each of these capabilities, they all use the same underlying assistant with all capabilities enabled.

The main logic for chat will be found in the Chat component in app/components/chat.tsx, and the handlers starting with api/assistants/threads (found in api/assistants/threads/...). Feel free to start your own project and copy some of this logic in! The Chat component itself can be copied and used directly, provided you copy the styling from app/components/chat.module.css as well.

Pages

Main Components

  • app/components/chat.tsx - handles chat rendering, streaming, and function call forwarding
  • app/components/file-viewer.tsx - handles uploading, fetching, and deleting files for file search

Endpoints

  • api/assistants - POST: create assistant (only used at startup)
  • api/assistants/threads - POST: create new thread
  • api/assistants/threads/[threadId]/messages - POST: send message to assistant
  • api/assistants/threads/[threadId]/actions - POST: inform assistant of the result of a function it decided to call
  • api/assistants/files - GET/POST/DELETE: fetch, upload, and delete assistant files for file search

Feedback

Let us know if you have any thoughts, questions, or feedback in this form!

OpenAI Assistants Screenshot
Avatar of openaiopenai/openai-assistants-quickstart

OpenAI Assistants Quickstart

A quick-start template using the OpenAI Assistants API with Next.js built by OpenAI

Framework
Use Case

OpenAI Assistants API Quickstart

A quick-start template using the OpenAI Assistants API with Next.js.

Quickstart Setup

1. Clone repo

git clone https://github.com/openai/openai-assistants-quickstart.git
cd openai-assistants-quickstart

2. Set your OpenAI API key

export OPENAI_API_KEY="sk_..."

(or in .env.example and rename it to .env).

3. Install dependencies

npm install

4. Run

npm run dev

5. Navigate to http://localhost:3000.

Deployment

You can deploy this project to Vercel or any other platform that supports Next.js.

Overview

This project is intended to serve as a template for using the Assistants API in Next.js with streaming, tool use (code interpreter and file search), and function calling. While there are multiple pages to demonstrate each of these capabilities, they all use the same underlying assistant with all capabilities enabled.

The main logic for chat will be found in the Chat component in app/components/chat.tsx, and the handlers starting with api/assistants/threads (found in api/assistants/threads/...). Feel free to start your own project and copy some of this logic in! The Chat component itself can be copied and used directly, provided you copy the styling from app/components/chat.module.css as well.

Pages

Main Components

  • app/components/chat.tsx - handles chat rendering, streaming, and function call forwarding
  • app/components/file-viewer.tsx - handles uploading, fetching, and deleting files for file search

Endpoints

  • api/assistants - POST: create assistant (only used at startup)
  • api/assistants/threads - POST: create new thread
  • api/assistants/threads/[threadId]/messages - POST: send message to assistant
  • api/assistants/threads/[threadId]/actions - POST: inform assistant of the result of a function it decided to call
  • api/assistants/files - GET/POST/DELETE: fetch, upload, and delete assistant files for file search

Feedback

Let us know if you have any thoughts, questions, or feedback in this form!

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential