.d8888b. 888888b. 888 d8P
d88P Y88b 888 "88b 888 d8P
888 888 888 .88P 888 d8P
888 8888888K. 888d88K
888 888 "Y88b 8888888b
888 888 888 888 888 Y88b
Y88b d88P 888 d88P 888 Y88b
"Y8888P" 8888888P" 888 Y88b .ai

ChatBotKit Node SDK

The official JavaScript and TypeScript SDK suite for ChatBotKit - a platform for building and deploying conversational AI applications. With ChatBotKit you can create bots and agents with custom data, skillsets, and integrations while keeping AI orchestration on the ChatBotKit platform.

This meta repository contains SDK packages and tools for popular platforms and frameworks such as Node.js, React, Next.js, NextAuth.js, widgets, and more.

Main Packages

The ChatBotKit Node SDK is comprised of the following packages:

Package	Version	Description
@chatbotkit/cli		The ChatBotKit CLI.
@chatbotkit/sdk		The ChatBotKit API SDK.
@chatbotkit/agent		The ChatBotKit Agent SDK.
@chatbotkit/react		The ChatBotKit React SDK.
@chatbotkit/next		The ChatBotKit Next.js SDK.
@chatbotkit/nextauth		The ChatBotKit NextAuth.js SDK.
@chatbotkit/widget		The ChatBotKit Widget types and utilities.
@chatbotkit/fetch		The ChatBotKit isometric fetch implementation.

Other Tools

This repository also contains the following tools:

Package	Version	Description
create-cbk-app		A quick tool to create a new CBK application.

Why ChatBotKit?

Build lighter, future-proof AI agents. When you build with ChatBotKit, the heavy lifting happens on our servers, not in your application. This architectural advantage delivers:

• 🪶 Lightweight Agents: Your agents stay lean because complex AI processing, model orchestration, and tool execution happen server-side. Less code in your app means faster load times and simpler maintenance.

• 🛡️ Robust & Streamlined: Server-side processing provides a more reliable experience with built-in error handling, automatic retries, and consistent behavior across all platforms.

• 🔄 Backward & Forward Compatible: As AI technology evolves with new models, new capabilities, and new paradigms, your agents automatically benefit. No code changes required on your end.

• 🔮 Future-Proof: Agents you build today will remain capable tomorrow. When we add support for new AI models or capabilities, your existing agents gain those powers without any updates to your codebase.

This means you can focus on building great user experiences while ChatBotKit handles the complexity of the ever-changing AI landscape.

SDK Features

• Easy Setup: Quick and straightforward installation process.
• Serverless Compatibility: Works seamlessly with modern runtime environments like Serverless, Edge, Vercel, Netlify, Cloudflare Workers, Deno, AWS Lambda, and more.
• Modern Framework Support: Built-in support for CommonJS, ECMAScript Modules, async/await, streams, etc.
• Customizability: Tailor the chatbot’s behavior and responses to fit specific use cases.
• Multi-Platform: Deploy chatbots on websites, mobile apps, and messaging platforms like Slack, Discord, and WhatsApp.
• Multi-Model: Support for a wide range of language models, including GPT-3, GPT-4, Claude, and more.

ChatBotKit Capabilities

• 🔄 Multi-modal Support: Support various language and image models from all vendors such as OpenAI, Anthropic, Mistral, AWS, Google and others.
• 🌍 Multi-language Support: Allowing for easy customization and use in diverse linguistic contexts.
• 💬 Conversation Management: Manage complex conversation flaws with ease.
• 🗨 Chat History: Review and reference past conversations.
• 💾 Custom Datasets: Organize data for bot responses.
• 💡 Custom Skillset: Equip chatbots with unique abilities like image generation or web fetching.
• 📄 Document File Importing: Import various document file types into chatbot datasets.
• 🎵 Media File Importing: Import a range of media file formats into chatbot datasets.
• 🌐 Widget Integration: Seamlessly embed chatbots on websites with customizable options.
• 💬 Slack, Discord, WhatsApp Bot Integrations: Easy integration with popular messaging platforms.
• 🗺 Sitemap Integration: Ingest website content into a searchable knowledge base.
• 🎥 Streaming: Enable/disable streaming capabilities.
• 🔒 Data Security: Robust measures to protect user data.
• 🕵 Privacy Focus: Strong privacy controls to ensure responsible data handling.
• 🚫 Content Moderation: Automatic scanning and flagging of abusive content.
• 💵 Simple Pricing: Transparent and straightforward pricing.

Getting Started

Follow these steps to start with ChatBotKit:

1. Installation:

   npm install @chatbotkit/sdk

2. Usage: Implement the SDK in your chatbot project.

Streaming Example

This example demonstrates streaming capabilities in Edge and Serverless environments:

import{ConversationClient}from'@chatbotkit/sdk/conversation/index.js'constclient=newConversationClient(/* configuration */)forawait(const{ type, data }ofclient.complete(null,{model: 'gpt-4', messages }).stream()){if(type==='token'){process.stdout.write(data.token)}}

NextGen Example for Next.js

This example showcases how to build advanced conversational AI with streaming, function calls, server-side rendering and much more in a Next.js project:

// file: ./app/page.jsximportChatAreafrom'../components/ChatArea.jsx'exportdefaultfunctionPage(){return<ChatArea/>}// file: ./components/ChatArea.jsx'use client'import{useContext}from'react'import{complete}from'../actions/conversation.jsx'import{ChatInput,ConversationContext}from'@chatbotkit/react'importConversationManagerfrom'@chatbotkit/react/components/ConversationManager'exportfunctionChatMessages(){const{
thinking,
text,
setText,
messages,
submit,}=useContext(ConversationContext)return(<div><div>{messages.map(({ id, type, text, children })=>{switch(type){case'user':
return(<divkey={id}><div><strong>user:</strong>{text}</div></div>)case'bot':
return(<divkey={id}><div><strong>bot:</strong>{text}</div>{children ? <div>{children}</div> : null}</div>)}})}{thinking ? (<divkey="thinking"><strong>bot:</strong> thinking...
</div>) : null}</div><ChatInputvalue={text}onChange={(e)=>setText(e.target.value)}onSubmit={submit}placeholder="Type something..."style={{border: 0,outline: 'none',resize: 'none',width: '100%',marginTop: '10px',}}/></div>)}exportdefaultfunctionChatArea(){return(<ConversationManagerendpoint={complete}><ChatMessages/></ConversationManager>)}// file: ./actions/conversation.jsx'use server'importCalendarEventsfrom'../components/CalendarEvents.jsx'import{streamComplete}from'@chatbotkit/react/actions/complete'import{ChatBotKit}from'@chatbotkit/sdk'constcbk=newChatBotKit({secret: process.env.CHATBOTKIT_API_SECRET,})exportasyncfunctioncomplete({ messages }){returnstreamComplete({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()=>{constevents=[{id: 1,title: 'Meeting with Jane Doe'},{id: 2,title: 'Meeting with Jill Doe'},]return{children: <CalendarEventsevents={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:

// file: ./pages/index.jsimport{AutoTextarea,useConversationManager}from'@chatbotkit/react'exportdefaultfunctionIndex(){const{
thinking,
text,
setText,
messages,
submit,}=useConversationManager({endpoint: '/api/conversation/complete',})functionhandleOnKeyDown(event){if(event.keyCode===13){event.preventDefault()submit()}}return(<divstyle={{fontFamily: 'monospace',padding: '10px'}}>{messages.map(({ id, type, text })=>(<divkey={id}><strong>{type}:</strong>{text}</div>))}{thinking&&(<divkey="thinking"><strong>bot:</strong> thinking...
</div>)}<AutoTextareavalue={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.jsimport{ChatBotKit}from'@chatbotkit/sdk'import{stream}from'@chatbotkit/next/edge'constcbk=newChatBotKit({secret: process.env.CHATBOTKIT_API_SECRET,})exportdefaultasyncfunctionhandler(req){const{ messages }=awaitreq.json()returnstream(cbk.conversation.complete(null,{ messages }))}exportconstconfig={runtime: 'edge',}

Examples

Explore a wide range of examples here.

Some notable examples include:

Platform	Example	Description
Next.js	Authenticated Chat with Contacts	Demonstrates ChatBotKit Contacts for managing end-users with authentication. Shows how to use fingerprints to track users, enable personalized experiences, and unlock authentication management for 3rd-party integrations like Google and Microsoft.
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	Stateful Chat	A basic chatbot example, where the conversation is managed by ChatBotKit.
Next.js	User NextAuth Example	Shows how to provision isolated users through NextAuth.
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.
• LLMS.txt: Documentation suitable for coding assistants can be found 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.

Setup

The project is setup as a monorepo using pnpm and turbo build. Clone the reporitory and run the following commands to get started:

pnpm install

To perform type and lint checks, run:

pnpm check
pnpm lint

To build the project, run:

pnpm build

To build a specific package, run:

pnpm -F @chatbotkit/${PACKAGE_NAME} build