OpenAI Assistant Starter Kit

Try the live version of this application by visiting:

OpenAI Assistant Starter Kit

The OpenAI Assistant Starter Kit is a fully-functional OpenAI chat application that illustrates:

• Streaming OpenAI Assistant responses from the server to deliver realtime responses.
• Customizing the appearance and behavior of your OpenAI chat application.
• Handling a long thread of messages without losing context.
• Designing an OpenAI app to work on both mobile and desktop.

This Starter Kit was built using NextJS + ReactJS + TypeScript + OpenAI.

Configure Your Assistant

Before you can use this Starter Kit, you must first configure an OpenAI Assistant by visiting the OpenAI Playground. Create a new OpenAI Assistant by entering an Assistant name, instructions, and model.

After you create your new Assistant, make note of the Assistant Id. You'll need this Id to build a UI for your Assistant using the Starter Kit.

Downloading and Running the Code Locally

Complete these three steps to download and run the OpenAI Assistant Starter Kit locally.

First, create a new NextJS app that uses the OpenAI Assistant Starter Kit as a template:

npx create-next-app@latest openai-assistant-starter-kit --use-npm --example "https://github.com/Superexpert/openai-assistant-starter-kit"

In your new folder, run the following command to get all of your npm packages:

npm install

Second, ensure that you have configured an OpenAI API Key on your computer. You can run the following command from Terminal in MacOS:

nano ~/.zshrc

Add your OpenAI API Key:

export OPENAI_API_KEY='your-api-key-here'

And then hit Ctrl+O to write the changes, followed by Ctrl+X to close the editor. Restart Terminal so it can pick up on the new environment variable.

Next, you need to add your Assistant Id to the Starter Kit. Open the app/page.tsx file and modify the assistantId prop associated with the OpenAIAssistant ReactJS component:

<OpenAIAssistant 
    assistantId="asst_gx3Htc0gLVNlpBQKLoefkXZZ"
    greeting="I am a helpful chat assistant. How can I help you?"
/>

Finally, run the app by entering the following command in Terminal:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Learn More

To learn more about building OpenAI applications, consider hiring Superexpert Training to provide an OpenAI workshop for your company.