Building a Stateless Conversational AI Chatbot with Next.js and ChatBotKit SDK
This tutorial will guide you through the process of building a stateless conversational AI chatbot using the Next.js framework and ChatBotKit SDK.
Prerequisites
Before we begin, ensure you have the following installed:
- Node.js and npm
- Next.js
- ChatBotKit SDK
Setting up ChatBotKit SDK requires a secret key which can be obtained through your ChatBotKit account. For the purposes of this tutorial, let's assume you have the secret key stored in process.env.CHATBOTKIT_API_SECRET
.
Project Structure
In this tutorial, we'll mainly focus on three files:
README.md
: Documentation that explains project details.pages/index.js
: Renders a basic user interface for the chat.pages/api/conversation/complete.js
: Handles incoming messages and completes the conversation.
Step 1: Setting Up a Next.js Project
Before we start building our chatbot, we first need to set up a new Next.js project. Follow the steps below to do this:
1.1 Install Node.js and npm
First, you need Node.js and npm installed on your system. If you don't have them installed, you can download Node.js and npm from here.
To verify if you have them installed, run the following commands in your terminal:
node --version npm --version
1.2 Create a New Next.js App
To create a new Next.js application, you can use create-next-app
, which sets up everything automatically for you. To create a new Next.js application, open your terminal, navigate to the directory where you want to create your project, and run the following command:
npx create-next-app@latest my-chatbot-app
Replace my-chatbot-app
with the name of your application. This command will create a new directory with the name of your application, and it will install all the necessary files and dependencies for a new Next.js application.
1.3 Run the Next.js App
Navigate into your new project's directory:
cd my-chatbot-app
Then, run the following command to start the development server:
npm run dev
If everything is set up correctly, you should be able to see your new Next.js application by opening http://localhost:3000 in your browser.
1.4 Install ChatBotKit SDK
To install the ChatBotKit SDKs, navigate to your project's root directory in your terminal and run the following command:
npm install @chatbotkit/sdk @chatbotkit/next
With these steps, we have our Next.js application ready. In the next steps, we will create our chatbot.
Step 2: Setting up the API Endpoint
First, we'll set up an API endpoint that will handle incoming messages and complete the conversation. This will be done in the pages/api/conversation/complete.js
file.
This file creates a global instance of the ChatBotKit SDK client, which is stateless. This means the messages are not stored, but all ChatBotKit features are available. Here's how it's done:
import { ChatBotKit } from '@chatbotkit/sdk' import { stream } from '@chatbotkit/next/edge' const cbk = new ChatBotKit({ secret: process.env.CHATBOTKIT_API_SECRET, }) export default async function handler(req) { const { messages } = await req.json() return stream( cbk.conversation.complete(null, { messages, }) ) } export const config = { runtime: 'edge', }
Step 3: Creating the Chat UI
Next, we'll create a basic chat interface to interact with the endpoint. This will be done in the pages/index.js
file.
We'll use the useConversationManager
hook from @chatbotkit/react
to manage the conversation state, and an AutoTextarea
component to render the user input field:
import { AutoTextarea, useConversationManager } from '@chatbotkit/react' export default function Index() { const { thinking, text, setText, messages, submit } = useConversationManager({ endpoint: '/api/conversation/complete', }) function handleOnKeyDown(event) { if (event.keyCode === 13) { event.preventDefault() submit() } } return ( <div style={{ fontFamily: 'monospace', padding: '10px' }}> <div> {messages.map(({ id, type, text }) => { switch (type) { case 'user': return ( <div key={id}> <strong>user:</strong> {text} </div> ) case 'bot': return ( <div key={id}> <strong>bot:</strong> {text} </div> ) } })} {thinking ? ( <div key="thinking"> <strong>bot:</strong> thinking... </div> ) : null} </div> <AutoTextarea value={text} onChange={(e) => setText(e.target.value)} onKeyDown={handleOnKeyDown} placeholder="Type something..." style={{ border: 0, outline: 'none', resize: 'none', width: '100%', marginTop: '10px', }} /> </div> ) }
Step 4: Running the application
To start the development server all you need is the following command:
npm run dev
Finally, open http://localhost:3000 with your browser to see your chatbot in action.
Congratulations on building your stateless conversational AI chatbot with Next.js and ChatBotKit SDK! You can find this example in ChatBotKit Node SDK on GitHub. Also, make sure you check our AI Bot API!