.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
Willkommen beim ChatBotKit Node SDK. Dieses SDK bietet eine JavaScript-basierte Plattform für die mühelose Erstellung von Konversations-KI-Bots und -Agenten. Mit ChatBotKit können Sie schnell KI-Bots entwickeln und einsetzen, die zu Interaktionen in natürlicher Sprache fähig sind.
Dies ist ein Meta-Repository für das ChatBotKit Node SDK. Es enthält die SDK-Pakete für eine Reihe beliebter Plattformen und Frameworks wie React , Next.js , NextAuth und mehr.
Das ChatBotKit Node SDK besteht aus den folgenden Paketen:
Paket | Version | Beschreibung |
---|---|---|
@chatbotkit/cli | Die ChatBotKit-CLI. | |
@chatbotkit/sdk | Das ChatBotKit-API-SDK. | |
@chatbotkit/react | Das ChatBotKit React SDK. | |
@chatbotkit/next | Das ChatBotKit Next.js SDK. | |
@chatbotkit/nextauth | Das ChatBotKit NextAuth.js SDK. | |
@chatbotkit/fetch | Die isometrische Abrufimplementierung von ChatBotKit. |
Dieses Repository enthält außerdem die folgenden Tools:
Paket | Version | Beschreibung |
---|---|---|
create-cbk-app | Ein schnelles Tool zum Erstellen einer neuen CBK-Anwendung. |
Befolgen Sie diese Schritte, um mit ChatBotKit zu beginnen:
npm install @chatbotkit/sdk
Dieses Beispiel demonstriert Streaming-Funktionen in Edge- und serverlosen Umgebungen:
import { ConversationClient } from '@chatbotkit/sdk/conversation/index.js'
const client = new ConversationClient ( /* configuration */ )
for await ( const { type , data } of client
. complete ( null , { model : 'gpt-4' , messages } )
. stream ( ) ) {
if ( type === 'token' ) {
process . stdout . write ( data . token )
}
}
Dieses Beispiel zeigt, wie man in einem Next.js-Projekt eine fortschrittliche Konversations-KI mit Streaming, Funktionsaufrufen, serverseitigem Rendering und vielem mehr erstellt:
// 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 } ` } , } , ] , } ) }
Dieses kurze Beispiel zeigt, wie das SDK in einem Next.js-Projekt verwendet wird:
// 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' , }
Entdecken Sie hier eine Reihe von Beispielen.
Einige bemerkenswerte Beispiele sind:
Plattform | Beispiel | Beschreibung |
---|---|---|
Next.js | Zustandsloser Chat (App Router + RSC + Funktionen + Funktionsanforderung) | Ein Beispiel für einen zustandslosen Chatbot, bei dem die Konversation vom Client und vom Server verwaltet wird. In diesem Beispiel werden die App Router- und Serveraktionen sowie KI-Funktionen mit Funktionsanforderungen verwendet. Dies ist ein aussagekräftiges Beispiel, um die vollen Möglichkeiten der ChatBotKit-Konversations-KI-Plattform zu demonstrieren. |
Next.js | Stateless Chat (App Router + RSC + Funktionen) | Ein Beispiel für einen zustandslosen Chatbot, bei dem die Konversation vom Client und vom Server verwaltet wird. In diesem Beispiel werden die App-Router- und Serveraktionen sowie KI-Funktionen verwendet. |
Next.js | Zustandsloser Chat (App Router + RSC) | Ein Beispiel für einen zustandslosen Chatbot, bei dem die Konversation vom Client und vom Server verwaltet wird. In diesem Beispiel werden die App-Router- und Serveraktionen verwendet. |
Next.js | Statusloser Chat (App-Router) | Ein Beispiel für einen zustandslosen Chatbot, bei dem die Konversation vom Kunden verwaltet wird. In diesem Beispiel wird der App Router verwendet. |
Next.js | Staatenloser Chat | Ein Beispiel für einen zustandslosen Chatbot, bei dem die Konversation vom Kunden verwaltet wird. |
Next.js | Einfacher Chat | Ein einfaches Chatbot-Beispiel, bei dem die Konversation von ChatBotKit verwaltet wird. |
Next.js | NextAuth-Beispiel | Zeigt, wie NextAuth und ChatBotKit kombiniert werden. |
Knoten | GPT4-Streaming-KI-Chatbot | Ein einfaches Beispiel für einen Streaming-KI-Chatbot. |
Cloudflare-Mitarbeiter | GPT4 KI-Chatbot | Ein Beispiel für einen Streaming-KI-Chatbot für Cloudflare Workers. |
Alle SDK-Funktionen gelten als instabil, sofern sie nicht ausdrücklich als stabil gekennzeichnet sind. Stabilität wird durch das Vorhandensein eines @stable
-Tags in der Dokumentation angezeigt.
Haben Sie einen Fehler entdeckt oder möchten Sie einen Beitrag leisten? Öffnen Sie ein Problem oder senden Sie eine Pull-Anfrage in unserem offiziellen GitHub-Repository.