A template to help you quickly start your next Generative UI project using Next.js, ChatBotKit, and JavaScript.
Note: This template is deliberately bare-bones. It provides the minimal structure and wiring needed to get a working app, intentionally leaving styling, layout, and architectural choices open so you can build on top without fighting existing opinions.
Building an AI application with dynamic UI typically means sourcing models, a conversation layer, background processing, storage, a tested abilities catalogue, authentication, security, monitoring, and more from separate systems. The cost adds up fast - not just in money, but in engineering time.
ChatBotKit brings all of this into one platform. This template gets you started with a generative UI app that connects to a single API for conversation handling and agent capabilities.
- ChatBotKit SDK: For building the chatbot logic and handling conversation flow.
- React: For UI components that interact with the user, such as forms for capturing appointment details and slot selection.
- Next.js: The application environment.
npx create-cbk-appFollow the prompts and configure environment variables (see below).
# Clone the repository
git clone <repo-url>
cd template-nextjs-generative-ui-js
# Install dependencies
npm install
# Configure environment
cp .env.example .env
# Edit .env with your values (see Environment Variables below)
# Start the development server
npm run devOpen http://localhost:3000 to get started.
| Variable | Required | Description |
|---|---|---|
CHATBOTKIT_API_SECRET |
Yes | ChatBotKit API token from chatbotkit.com/tokens |
CHATBOTKIT_MODEL |
No | Model to use for conversation (default: gpt-5.4-mini) |
- Sign up or log in at chatbotkit.com
- Go to chatbotkit.com/tokens and create an API token
- Copy the API token to
CHATBOTKIT_API_SECRETin your.envfile
No pre-configured bot is needed. The agent backstory and functions are defined inline in actions/conversation.jsx. Customize the backstory and add your own generative UI function components in components/functions/.
├── actions/
│ └── conversation.jsx # Server action with streaming + function definitions
├── app/
│ ├── globals.css # Global styles
│ ├── layout.js # Root layout
│ └── page.js # Home page with chat UI
├── components/
│ ├── ChatArea.jsx # Main chat area component
│ └── functions/ # Generative UI function components
│ ├── index.js # Function component registry
│ └── Component01.jsx # Example function component
└── package.json
The easiest way to deploy this Next.js app is to use the Vercel Platform.
MIT - see LICENSE