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
• Quick examples for starter prompts, placeholder text, and greeting message

Follow every step below to run the app locally and configure it for your preferred backend.

npm install

Copy the example file and fill in the required values:

cp .env.example .env.local

Update .env.local with the variables that match your setup.

• OPENAI_API_KEY — API key created within the same org & project as your Agent Builder
• NEXT_PUBLIC_CHATKIT_WORKFLOW_ID — the workflow you created in Agent Builder
• (optional) CHATKIT_API_BASE - customizable base URL for the ChatKit API endpoint

npm run dev

Visit 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 build
npm start

• Adjust starter prompts, greeting text, and placeholder copy in lib/config.ts.
• Update the theme defaults or event handlers inside components/.tsx to integrate with your product analytics or storage.

• ChatKit JavaScript Library
• Advanced Self-Hosting Examples