Следващ SDK
Unleash the power of conversational AI in your Next.js projects with our ChatBotKit Next.js SDK. This SDK is specifically designed to seamlessly integrate chatbot functionalities into Next.js applications, optimized for Next.js Edge runtime environments.
Основни характеристики
- 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.
Започване на работа
Start your journey with our SDK in two simple steps:
-
Installation: Add the SDK to your project by running the following npm command:
npm install @chatbotkit/next @chatbotkit/react @chatbotkit/sdk
-
Integration: Use the SDK to create and manage chatbot interactions in your Next.js application.
Example: Streaming for Next.js Edge Runtime
Here's an example showcasing how to implement a chatbot in a Next.js application using the Edge runtime environment:
Server-Side Code
// 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', }
Client-Side Code
// 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> ) }
Потопете се по-дълбоко
Ready to explore more? Our comprehensive SDK documentation provides everything you need to get started with ChatBotKit Next.js SDK. For a full example with additional features, please visit our GitHub repository.
Join us in the era of conversational AI. Empower your Next.js applications with ChatBotKit Next.js SDK - because your applications deserve the best!