Siguiente SDK
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:
-
Instalación: Añade el SDK a tu proyecto ejecutando el siguiente comando npm:
npm install @chatbotkit/next @chatbotkit/react @chatbotkit/sdk
-
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!