←volver a características

Siguiente SDK

Aprenda a liberar el poder de la IA conversacional en sus proyectos Next.js con nuestro SDK ChatBotKit Next.js. Integre sin problemas las funcionalidades de chatbot en sus aplicaciones, optimizadas para entornos de ejecución Next.js Edge. ¡Empiece hoy mismo!

Libera el poder de la IA conversacional en tus proyectos Next.js con nuestro SDK ChatBotKit Next.js. Este SDK está diseñado específicamente para integrar a la perfección las funcionalidades de chatbot en aplicaciones Next.js, optimizadas para entornos de ejecución Next.js Edge.

Características 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.

Primeros pasos

Start your journey with our SDK in two simple steps:

  1. Instalación: Añade el SDK a tu proyecto ejecutando el siguiente comando npm:

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

  2. Integración: Utiliza el SDK para crear y gestionar interacciones de chatbot en tu aplicación Next.js.

Ejemplo: Streaming para Next.js Edge Runtime

A continuación se muestra un ejemplo de cómo implementar un chatbot en una aplicación Next.js utilizando el entorno de ejecución Edge:

Código del lado del servidor

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

Código cliente

// 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>
  )
}

Profundizar

¿Quiere saber más? Nuestra completa documentación del SDK le ofrece todo lo que necesita para empezar a utilizar el SDK de ChatBotKit Next.js. Para ver un ejemplo completo con funciones adicionales, visita nuestro repositorio de GitHub.

Únete a nosotros en la era de la IA conversacional. Potencie sus aplicaciones Next.js con ChatBotKit Next.js SDK - ¡porque sus aplicaciones se merecen lo mejor!

SDKSiguienteNext.jsprogramacióndesarrollo