Page d'accueil>Lié à la programmation>Autre code source
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 } `
        } ,
      } ,
    ] ,
  } )
}

Exemple Next.js de base

Cet exemple rapide montre comment utiliser le SDK dans un projet Next.js :

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' ,
} 

Exemples

Découvrez une gamme d’exemples ici.

Voici quelques exemples notables :

Plate-forme Exemple Description
Suivant.js Chat sans état (Routeur d'application + RSC + Fonctions + Demande de fonction) Un exemple de chatbot apatride, où la conversation est gérée par le client et le serveur. Cet exemple utilise les actions du routeur d'application et du serveur ainsi que les fonctions IA avec des requêtes de fonction. Il s'agit d'un exemple puissant pour démontrer toutes les capacités de la plateforme d'IA conversationnelle ChatBotKit.
Suivant.js Chat sans état (Routeur d'application + RSC + Fonctions) Un exemple de chatbot apatride, où la conversation est gérée par le client et le serveur. Cet exemple utilise les actions du routeur d'application et du serveur ainsi que les fonctions d'IA.
Suivant.js Chat sans état (routeur d'application + RSC) Un exemple de chatbot apatride, où la conversation est gérée par le client et le serveur. Cet exemple utilise les actions du routeur d'application et du serveur.
Suivant.js Chat sans état (routeur d'application) Un exemple de chatbot apatride, où la conversation est gérée par le client. Cet exemple utilise le routeur d'applications.
Suivant.js Chat apatride Un exemple de chatbot apatride, où la conversation est gérée par le client.
Suivant.js Chat de base Un exemple de chatbot basique, où la conversation est gérée par ChatBotKit.
Suivant.js Exemple NextAuth Montre comment combiner NextAuth et ChatBotKit.
Nœud Chatbot IA de streaming GPT4 Un exemple simple de chatbot IA en streaming.
Travailleurs Cloudflare Chatbot IA GPT4 Un exemple de chatbot IA en streaming pour Cloudflare Workers.

Stabilité

Toutes les fonctionnalités du SDK sont considérées comme instables sauf si elles sont explicitement marquées comme stables. La stabilité est indiquée par la présence d'une balise @stable dans la documentation.

Documentation

  • Documentation de type : informations détaillées sur les types disponibles ici.
  • Documentation de la plateforme : guide complet de ChatBotKit ici.
  • Tutoriels de plateforme : Tutoriels étape par étape pour ChatBotKit ici.

Contribuer

Vous rencontrez un bug ou souhaitez contribuer ? Ouvrez un ticket ou soumettez une pull request sur notre référentiel GitHub officiel.

Développer
Informations supplémentaires