AgentKit Amazing

AgentKit Amazing is a production-ready AI ChatKit application powered by OpenAI's ChatKit and Agent Builder. It features a beautiful, modern UI built with Next.js and is ready to deploy to Vercel in minutes.

What You Get

• 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

Getting Started

1. Install dependencies

npm install

2. Create your environment file

Copy the example file and fill in the required values:

cp .env.example .env.local

You 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.

3. Configure ChatKit credentials

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

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".

4. Run the app

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.

5. Deploy your app

npm run build

Before deploying your app, you need to verify the domain by adding it to the Domain allowlist on your dashboard.

Deploy to Vercel

This app is configured for easy deployment to Vercel:

1. Push your code to GitHub

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin <your-github-repo-url>
   git push -u origin main

2. Import project to Vercel

   • Go to vercel.com
   • Click "Import Project"
   • Select your GitHub repository

3. Configure environment variables In the Vercel project settings, add these environment variables:

   • OPENAI_API_KEY - Your OpenAI API key
   • NEXT_PUBLIC_CHATKIT_WORKFLOW_ID - Your ChatKit workflow ID
   • (Optional) CHATKIT_API_BASE - Custom API base URL if needed

4. Deploy

   • Click "Deploy"
   • Wait for the build to complete
   • Your app will be live!

5. Domain verification

   • After deployment, go to your Vercel deployment URL
   • Add this URL to your OpenAI Domain allowlist

Note: The app is pre-configured with vercel.json for optimal deployment settings.

Customization Tips

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

References

• ChatKit JavaScript Library
• Advanced Self-Hosting Examples