Home>Programming related>Other source code
setText(e.target.value)} onSubmit={submit} placeholder="Type something..." style={{ border: 0, outline: 'none', resize: 'none', width: '100%', marginTop: '10px', }} />
) } export default function ChatArea() { return ( ) } // file: ./actions/conversation.jsx 'use server' import CalendarEvents from '../components/CalendarEvents.jsx' import { streamComplete } from '@chatbotkit/react/actions/complete' import { ChatBotKit } from '@chatbotkit/sdk' const cbk = new ChatBotKit({ secret: process.env.CHATBOTKIT_API_SECRET, }) export async function complete({ messages }) { return streamComplete({ client: cbk.conversation, messages, functions: [ { name: 'getUserName', description: 'Get the authenticated user name', parameters: {}, handler: async () => { return 'John Doe' }, }, { name: 'getCalendarEvents', description: 'Get a list of calendar events', parameters: {}, handler: async () => { const events = [ { id: 1, title: 'Meeting with Jane Doe' }, { id: 2, title: 'Meeting with Jill Doe' }, ] return { children: , result: { events, }, } }, }, { name: 'declineCalendarEvent', description: 'Decline a calendar event', parameters: { type: 'object', properties: { id: { type: 'number', description: 'The ID of the event to decline', }, }, required: ['id'], }, handler: async ({ id }) => { return `You have declined the event with ID ${id}` }, }, ], }) }">
// file: ./app/page.jsx
import ChatArea from '../components/ChatArea.jsx'

export default function Page() {
  return <ChatArea />
}

// file: ./components/ChatArea.jsx
'use client'

import { useContext } from 'react'

import { complete } from '../actions/conversation.jsx'

import { ChatInput, ConversationContext } from '@chatbotkit/react'
import ConversationManager from '@chatbotkit/react/components/ConversationManager'

export function ChatMessages() {
  const {
    thinking,

    text,
    setText,

    messages,

    submit,
  } = useContext(ConversationContext)

  return (
    <div>
      <div>
        {messages.map(({ id, type, text, children }) => {
          switch (type) {
            case 'user':
              return (
                <div key={id}>
                  <div>
                    <strong>user:</strong> {text}
                  </div>
                </div>
              )

            case 'bot':
              return (
                <div key={id}>
                  <div>
                    <strong>bot:</strong> {text}
                  </div>
                  {children ? <div>{children}</div> : null}
                </div>
              )
          }
        })}
        {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>
  )
}

export default function ChatArea() {
  return (
    <ConversationManager endpoint={complete}>
      <ChatMessages />
    </ConversationManager>
  )
}

// file: ./actions/conversation.jsx
'use server'

import CalendarEvents from '../components/CalendarEvents.jsx'

import { streamComplete } from '@chatbotkit/react/actions/complete'
import { ChatBotKit } from '@chatbotkit/sdk'

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

export async function complete({ messages }) {
  return streamComplete({
    client: cbk.conversation,

    messages,

    functions: [
      {
        name: 'getUserName',
        description: 'Get the authenticated user name',
        parameters: {},
        handler: async () => {
          return 'John Doe'
        },
      },

      {
        name: 'getCalendarEvents',
        description: 'Get a list of calendar events',
        parameters: {},
        handler: async () => {
          const events = [
            { id: 1, title: 'Meeting with Jane Doe' },
            { id: 2, title: 'Meeting with Jill Doe' },
          ]

          return {
            children: <CalendarEvents events={events} />,

            result: {
              events,
            },
          }
        },
      },

      {
        name: 'declineCalendarEvent',
        description: 'Decline a calendar event',
        parameters: {
          type: 'object',
          properties: {
            id: {
              type: 'number',
              description: 'The ID of the event to decline',
            },
          },
          required: ['id'],
        },
        handler: async ({ id }) => {
          return `You have declined the event with ID ${id}`
        },
      },
    ],
  })
}

Basic Next.js Example

This quick example demonstrates how to use the SDK in a Next.js project:

bot: thinking...
)} setText(e.target.value)} onKeyDown={handleOnKeyDown} placeholder="Type something..." style={{ border: 0, outline: 'none', resize: 'none', width: '100%', marginTop: '10px', }} /> ) } // file: ./pages/api/conversation/complete.js 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', }">
// file: ./pages/index.js
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' }}>
      {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>
  )
}

// file: ./pages/api/conversation/complete.js
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',
}

Examples

Explore a range of examples here.

Some notable examples include:

Platform Example Description
Next.js Stateless Chat (App Router + RSC + Functions + Function Request) A stateless chatbot example, where the conversation is managed by the client and the server. This example uses the App Router and Server Actions as well AI functions with function requests. This is a powerful example to demonstrate the full capabilities of the ChatBotKit conversational AI platform.
Next.js Stateless Chat (App Router + RSC + Functions) A stateless chatbot example, where the conversation is managed by the client and the server. This example uses the App Router and Server Actions as well AI functions.
Next.js Stateless Chat (App Router + RSC) A stateless chatbot example, where the conversation is managed by the client and the server. This example uses the App Router and Server Actions.
Next.js Stateless Chat (App Router) A stateless chatbot example, where the conversation is managed by the client. This example uses the App Router.
Next.js Stateless Chat A stateless chatbot example, where the conversation is managed by the client.
Next.js Basic Chat A basic chatbot example, where the conversation is managed by ChatBotKit.
Next.js NextAuth Example Shows how to combine NextAuth and ChatBotKit.
Node GPT4 Streaming AI chatbot A simple streaming AI chatbot example.
Cloudflare Workers GPT4 AI chatbot A streaming AI chatbot example for Cloudflare Workers.

Stability

All SDK features are considered unstable unless explicitly marked as stable. Stability is indicated by the presence of a @stable tag in the documentation.

Documentation

  • Type Documentation: Detailed information on available types here.
  • Platform Documentation: Comprehensive guide to ChatBotKit here.
  • Platform Tutorials: Step-by-step tutorials for ChatBotKit here.

Contributing

Encounter a bug or want to contribute? Open an issue or submit a pull request on our official GitHub repository.

Expand
Additional Information