Installing ChatBotKit Developer SDK

Prerequisites

• Node.js 14.x or later
• npm or yarn package manager
• A ChatBotKit account with API credentials

Installation Steps

Follow these step-by-step instructions to install and set up the ChatBotKit Developer SDK in your project. The process is straightforward and should take only a few minutes to complete. Make sure you have all the prerequisites ready before beginning the installation.

1. Install the SDK

Using npm:

npm install @chatbotkit/sdk
bash

Or using yarn:

yarn add @chatbotkit/sdk
bash

2. Initialize the SDK

Create a new file in your project and import the SDK:

import { ChatBotKit } from '@chatbotkit/sdk'

// Initialize the client
const client = new ChatBotKit({
  secret: process.env.CHATBOTKIT_API_KEY
})
javascript

3. Basic Usage Example

Here's a simple example of how to create a conversation:

// Create a conversation
const conversation = await client.conversation.create({
  model: "gpt-4",
  backstory: "You are a helpful assistant",
});

// Send a message
const result = await cbk.conversation.complete(conversation.id, {
  messages: [
    {
      type: "user",
      text: "What are the top 10 most popular movies of all time?",
    },
  ],
});

console.log(response.text);
javascript

4. Next.js Example

Here's how to use the ChatBotKit SDK in a Next.js application:

Let’s first install the ChatBotKit Next.js SDK and the React SDK:

npm install @chatbotkit/sdk @chatbotkit/next @chatbotkit/react
bash

Now let’s setup our api route:

// app/api/chat/route.ts

import { ChatBotKit } from '@chatbotkit/sdk'

import { stream } from '@chatbotkit/next/edge'

export async function POST(
  req: Request,
  { params }: { params: { id: string } }
) {
  const { messages } = await req.json()

  const cbk = new ChatBotKit({
    secret: process.env.CHATBOTKIT_API_KEY!,
  })

  return stream(
	  // This is a statless conversation.
    cbk.conversation.complete(null, {
      model:'o3-mini'
      backstory:'You are a helptful assistant',
      messages,
    })
  )
}
typescript

And in your client component:

'use client'

import { ChatInput, useConversationManager } from '@chatbotkit/react'

export default function ChatArea() {
  const {
    thinking,
    text,
    setText,
    message,
    messages,
    submit,
  } = useConversationManager({ endpoint: '/api/chat' })

  // Our renderer is quite basic. We simply iterate over the messages and render
  // them accordingly. We also use our own AutoTextarea for the user input.

  return (
    <div>
      <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>
              )
          }
        })}
        {message ? (
          <div key={message.id}>
            <strong>bot:</strong> {message.text}
          </div>
        ) : null}
        {thinking ? (
          <div key="thinking">
            <strong>bot:</strong> thinking...
          </div>
        ) : null}
      </div>
      <ChatInput
        value={text}
        onChange={(e) => setText(e.target.value)}
        onSubmit={submit}
        placeholder="Type something..."
        style={{
          border: 0,
          outline: 'none',
          resize: 'none',
          width: '100%',
          marginTop: '10px',
        }}
      />
    </div>
  )
}
javascript

Environment Variables

Create a .env file in your project root:

CHATBOTKIT_API_KEY=your_api_secret_key
bash

Additional Resources

• More SDKs: SDK References
• API Reference: API Reference
• GitHub Examples: ChatBotKit GitHub

Troubleshooting

• Ensure your API key has the correct permissions
• Check that you're using the latest SDK version
• Verify your Node.js version is compatible

For additional support, visit the ChatBotKit Support page or reach out to the developer community.