Recently, OpenAI released an open source project called “openai-assistants-quickstart” that demonstrates how to integrate and use OpenAI’s Assistants API within the Next.js framework. Through this project, developers can quickly understand and practice deploying and leveraging AI assistant capabilities in their own applications.
The Assistants API provides the ability to integrate artificial intelligence assistants into your applications. These assistants can receive instructions and use various models, tools, and files to handle user requests. Currently, the Assistants API supports the following three tool types:
- Code interpreter: Allows the assistant to execute code and provide results, which can be used for programming Q&A or task automation.
- File search: Enables the assistant to search and reference files to provide responses based on file content.
- Function calling: Allows the assistant to call predefined functions to perform specific tasks or queries.
Through these tools, the Assistants API can provide a flexible and powerful interactive experience to meet user needs in different scenarios.
This project aims to serve as a template for using the Assistants API in Next.js, including streaming, tool usage (code interpreter and file search), and function calling. While multiple pages demonstrate these features, they all use the same underlying assistant.
Feature Demos:
Basic Chat
Function Calling
File Search
Full-featured
Quick Start:
- Clone the project
git clone https://github.com/openai/openai-assistants-quickstart.git
cd openai-assistants-quickstart- Set your OpenAI API key
export OPENAI_API_KEY="sk_..."Or rename .env.example to .env and set the value of OPENAI_API_KEY.
- Install project dependencies
npm installNote: This project installs Next.js, which requires Node.js version greater than v18.17.0.
- Run the project
npm run devVisit http://localhost:3000 in your browser.
On the opened page, click the “Create Assistant” button to create an assistant and configure the generated ID in the app/assistant-config.ts file.
After configuring the assistantId, you can see the different feature menus as shown in the image below:
Project Overview:
Page Paths:
- Basic Chat:
http://localhost:3000/examples/basic-chat - Function Calling:
http://localhost:3000/examples/function-calling - File Search:
http://localhost:3000/examples/file-search - Full-featured:
http://localhost:3000/examples/all
Core Components:
app/components/chat.tsx: Handles chat rendering, streaming, and function call forwardingapp/components/file-viewer.tsx: Handles uploading, fetching, and deleting files for file search
