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](/docs/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.