Try the live version of this application by visiting:
The OpenAI Assistant Starter Kit is a fully-functional OpenAI chat application that illustrates:
This Starter Kit was built using NextJS + ReactJS + TypeScript + OpenAI.
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.
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.
To learn more about building OpenAI applications, consider hiring Superexpert Training to provide an OpenAI workshop for your company.