←retour aux caractéristiques

Prochain SDK

Apprenez à libérer la puissance de l'IA conversationnelle dans vos projets Next.js avec notre ChatBotKit Next.js SDK. Intégrez de manière transparente des fonctionnalités de chatbot dans vos applications, optimisées pour les environnements d'exécution Next.js Edge. Commencez dès aujourd'hui !

Libérez la puissance de l'IA conversationnelle dans vos projets Next.js avec notre ChatBotKit Next.js SDK. Ce SDK est spécialement conçu pour intégrer de manière transparente des fonctionnalités de chatbot dans les applications Next.js, optimisées pour les environnements d'exécution Next.js Edge.

Caractéristiques principales

  • Tailored for Next.js: Our SDK integrates seamlessly into your Next.js applications, providing a streamlined way to add conversational AI.
  • Optimized for Edge Runtime: The SDK is specifically optimized for Next.js Edge runtime environments, offering optimal performance and efficiency.
  • Rich Integration Example: We provide a detailed example illustrating how you can implement a chatbot in a Next.js application using the Edge runtime environment.

Pour commencer

Start your journey with our SDK in two simple steps:

  1. Installation: Ajoutez le SDK à votre projet en exécutant la commande npm suivante :

    npm install @chatbotkit/next @chatbotkit/react @chatbotkit/sdk

  2. Intégration: Utilisez le SDK pour créer et gérer des interactions avec un chatbot dans votre application Next.js.

Exemple : Streaming pour Next.js Edge Runtime

Voici un exemple qui montre comment mettre en œuvre un chatbot dans une application Next.js en utilisant l'environnement d'exécution Edge :

Code côté serveur

// file: ./pages/api/conversation/complete.js
// Import ChatBotKit and Edge streaming utilities
import { ChatBotKit } from '@chatbotkit/sdk'
import { stream } from '@chatbotkit/next/edge'

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

// Define an API handler for streaming messages
export default async function handler(req) {
  const { messages } = await req.json()

  return stream(cbk.conversation.complete(null, { messages }))
}

// Configure Edge runtime
export const config = {
  runtime: 'edge',
}

Code côté client

// file: ./pages/index.js
// Utilize components and hooks from ChatBotKit's React package
import { AutoTextarea, useConversationManager } from '@chatbotkit/react'

export default function Index() {
  const { thinking, text, setText, messages, submit } = useConversationManager({
    endpoint: '/api/conversation/complete',
  })

  // Handle text submission on Enter key press
  function handleOnKeyDown(event) {
    if (event.keyCode === 13) {
      event.preventDefault()

      submit()
    }
  }

  // Render chat interface
  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>
  )
}

Plonger plus profondément

Prêt à en savoir plus ? Notre documentation documentation SDK fournit tout ce dont vous avez besoin pour démarrer avec ChatBotKit Next.js SDK. Pour un exemple complet avec des fonctionnalités supplémentaires, veuillez visiter notre dépôt GitHub.

Rejoignez-nous dans l'ère de l'IA conversationnelle. Renforcez vos applications Next.js avec ChatBotKit Next.js SDK - parce que vos applications méritent ce qu'il y a de mieux !

SDKSuivantNext.jsprogrammationdéveloppement