This repository is the simplest way to bootstrap a ChatKit application. It ships with a minimal Next.js UI, the ChatKit web component, and a ready-to-use session endpoint so you can experiment with OpenAI-hosted workflows built using Agent Builder.
- Next.js app with
<openai-chatkit>web component and theming controls - API endpoint for creating a session at
app/api/create-session/route.ts - Config file for starter prompts, theme, placeholder text, and greeting message
npm installCopy the example file and fill in the required values:
cp .env.example .env.localYou can get your workflow id from the Agent Builder interface, after clicking "Publish":
You can get your OpenAI API key from the OpenAI API Keys page.
Update .env.local with the variables that match your setup.
OPENAI_API_KEY— This must be an API key created within the same org & project as your Agent Builder. If you already have a differentOPENAI_API_KEYenv variable set in your terminal session, that one will take precedence over the key in.env.localone (this is how a Next.js app works). So, please rununset OPENAI_API_KEY(set OPENAI_API_KEY=for Windows OS) beforehand.NEXT_PUBLIC_CHATKIT_WORKFLOW_ID— This is the ID of the workflow you created in Agent Builder, which starts withwf_...- (optional)
CHATKIT_API_BASE- This is a customizable base URL for the ChatKit API endpoint
Note: if your workflow is using a model requiring organization verification, such as GPT-5, make sure you verify your organization first. Visit your organization settings and click on "Verify Organization".
Navigate to http://localhost:3000/setup to open a client-side configuration screen. This page lets you enter your OpenAI API key and ChatKit workflow ID directly in the browser, stores them in localStorage, and pre-fills any previously saved values. You can clear the stored data, save the credentials for later, or save and immediately return to the main chat interface. If you prefer, you can continue managing the same settings through environment variables instead.
npm run devVisit http://localhost:3000 and start chatting. Use the prompts on the start screen to verify your workflow connection, then customize the UI or prompt list in lib/config.ts and components/ChatKitPanel.tsx.
npm run buildBefore deploying your app, you need to verify the domain by adding it to the Domain allowlist on your dashboard.
- Adjust starter prompts, greeting text, chatkit theme, and placeholder copy in
lib/config.ts. - Update the event handlers inside
components/.tsxto integrate with your product analytics or storage.