Главная страница>Связанные с программированием>Другой исходный код
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 } `
        } ,
      } ,
    ] ,
  } )
}

Базовый пример Next.js

Этот быстрый пример демонстрирует, как использовать SDK в проекте 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' ,
} 

Примеры

Ознакомьтесь с множеством примеров здесь.

Некоторые известные примеры включают в себя:

Платформа Пример Описание
Next.js Чат без сохранения состояния (маршрутизатор приложений + RSC + функции + запрос функции) Пример чат-бота без сохранения состояния, где разговор управляется клиентом и сервером. В этом примере используются действия маршрутизатора приложений и сервера, а также функции AI с запросами функций. Это мощный пример, демонстрирующий все возможности диалоговой платформы искусственного интеллекта ChatBotKit.
Next.js Чат без сохранения состояния (App Router + RSC + функции) Пример чат-бота без сохранения состояния, где разговор управляется клиентом и сервером. В этом примере используются действия маршрутизатора приложений и сервера, а также функции искусственного интеллекта.
Next.js Чат без сохранения состояния (App Router + RSC) Пример чат-бота без сохранения состояния, где разговор управляется клиентом и сервером. В этом примере используются действия маршрутизатора приложений и сервера.
Next.js Чат без сохранения состояния (маршрутизатор приложений) Пример чат-бота без сохранения состояния, в котором разговором управляет клиент. В этом примере используется App Router.
Next.js Чат без гражданства Пример чат-бота без сохранения состояния, в котором разговором управляет клиент.
Next.js Основной чат Базовый пример чат-бота, где разговором управляет ChatBotKit.
Next.js Пример следующей аутентификации Показывает, как объединить NextAuth и ChatBotKit.
Узел Чат-бот GPT4 Streaming AI Простой пример потокового чат-бота с искусственным интеллектом.
Рабочие Cloudflare Чат-бот GPT4 с искусственным интеллектом Пример потокового чат-бота с искусственным интеллектом для Cloudflare Workers.

Стабильность

Все функции SDK считаются нестабильными, если они явно не помечены как стабильные. Стабильность обозначается наличием тега @stable в документации.

Документация

  • Документация по типу : Подробную информацию о доступных типах можно найти здесь.
  • Документация по платформе : подробное руководство по ChatBotKit здесь.
  • Учебные пособия по платформе : пошаговые руководства по ChatBotKit можно найти здесь.

Содействие

Обнаружили ошибку или хотите внести свой вклад? Откройте проблему или отправьте запрос на включение в нашем официальном репозитории GitHub.

Расширять
Дополнительная информация