Next SDK

Unleash the power of conversational AI in your Next.js projects with our ChatBotKit Next.js SDK. This SDK is specifically designed to seamlessly integrate chatbot functionalities into Next.js applications, optimized for Next.js Edge runtime environments.

Key Features

• Tailored for Next.js: Our SDK integrates seamlessly into your Next.js applications, providing a streamlined way to add conversational AI.
• Optimized for Edge Runtime: The SDK is specifically optimized for Next.js Edge runtime environments, offering optimal performance and efficiency.
• Rich Integration Example: We provide a detailed example illustrating how you can implement a chatbot in a Next.js application using the Edge runtime environment.

Getting Started

Start your journey with our SDK in two simple steps:

1. Installation: Add the SDK to your project by running the following npm command:

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

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

Example: Streaming for Next.js Edge Runtime

Here's an example showcasing 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>
  )
}

Dive Deeper

Ready to explore more? Our comprehensive SDK documentation provides everything you need to get started with ChatBotKit Next.js SDK. For a full example with additional features, please visit our GitHub repository.

Join us in the era of conversational AI. Empower your Next.js applications with ChatBotKit Next.js SDK - because your applications deserve the best!