@chatbotkit/next

ChatBotKit Next.js SDK

The ChatBotKit SDK for Next.js is crafted to integrate chatbot functionalities seamlessly into Next.js applications, specifically optimized for Next.js Edge runtime environments.

Getting Started

Begin your journey with ChatBotKit using these steps:

• Installation: Add the SDK to your project by running the npm command:

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

• Integration: Utilize the SDK to create and manage chatbot interactions in your Next.js application.

Streaming Example for Next.js Edge Runtime

The following example showcases how to implement a chatbot in a Next.js application using the Edge runtime environment.

Server-Side Code

// file: ./pages/api/conversation/complete.js
// Import ChatBotKit and Edge streaming utilities
import { ChatBotKit } from '@chatbotkit/sdk'
import { stream } from '@chatbotkit/next/edge'

// Initialize ChatBotKit with API secret
const cbk = new ChatBotKit({
  secret: process.env.CHATBOTKIT_API_SECRET,
})

// Define an API handler for streaming messages
export default async function handler(req) {
  const { messages } = await req.json()

  return stream(cbk.conversation.complete(null, { messages }))
}

// Configure Edge runtime
export const config = {
  runtime: 'edge',
}

Client-Side Code

// file: ./pages/index.js
// Utilize components and hooks from ChatBotKit's React package
import { AutoTextarea, useConversationManager } from '@chatbotkit/react'

export default function Index() {
  const { thinking, text, setText, messages, submit } = useConversationManager({
    endpoint: '/api/conversation/complete',
  })

  // Handle text submission on Enter key press
  function handleOnKeyDown(event) {
    if (event.keyCode === 13) {
      event.preventDefault()

      submit()
    }
  }

  // Render chat interface
  return (
    <div style={{ fontFamily: 'monospace', padding: '10px' }}>
      {messages.map(({ id, type, text }) => (
        <div key={id}>
          <strong>{type}:</strong> {text}
        </div>
      ))}
      {thinking && (
        <div key="thinking">
          <strong>bot:</strong> thinking...
        </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>
  )
}

Explore a full example with additional features here.

Documentation

For a detailed exploration of the ChatBotKit Next SDK, including its capabilities and configurations tailored for Next.js Edge runtime, visit our type documentation page.

Contributing

If you find a bug or would like to contribute to the ChatBotKit SDK, please open an issue or submit a pull request on the official GitHub repository.