01
Límite de cliente pequeño
Marca solo el módulo de chat interactivo con use client, en lugar de trasladar una página o un layout completos al navegador.
SDK de chatbot de Next.js
Agregue un chatbot de IA personalizado a Siguiente.js
Utilice @openstaticfish/chattybox dentro de un límite de cliente enfocado mientras el resto de su aplicación App Router permanece procesada en el servidor. ChattyBox maneja la recuperación, las citas, las conversaciones y el escalado.
Rastrea páginas de documentos publicados
Respuestas citadas en la fuente
Incrustado con un script
No se requiere migración de documentos
No se requiere tarjeta de créditoTu contenido sigue siendo tuyo
Preguntar a ChattyBox
x¿Por dónde debería empezar si necesito una respuesta fiable de este sitio?
Empieza añadiendo la URL de tu sitio web a ChattyBox. Rastrea tu contenido, responde desde las páginas que encuentra y muestra a los visitantes las fuentes detrás de cada respuesta.
iFuentes3^
Siguiente.js guía
chattybox.ai
Analítica
chattybox.ai
Inicio
chattybox.ai
Haz una pregunta...
Con tecnología de ChattyBox
Construido para Equipos de enrutador de aplicaciones Next.js
Inicie un chatbot con fuente citada sin reconstruir su pila de documentos
ChattyBox rastrea su documentación existente, indexa el contenido para su recuperación e incorpora un chatbot que responde utilizando sus documentos en lugar de la memoria del modelo genérico.
Mantén la interfaz de chat interactiva dentro de una pequeña frontera use client.
Exponga solo una clave de widget pública con origen restringido a través de variables NEXT_PUBLIC.
Procese las respuestas citadas con su sistema de diseño Next.js y su shell de aplicación existente.
Siga gestionando el rastreo, la recuperación, el almacenamiento de vectores, la generación de respuestas y el escalado mediante ChattyBox.
Paso del flujo de trabajo
Instale @openstaticfish/chattybox en la aplicación Next.js.
Paso del flujo de trabajo
Agregue la clave API del widget público y la URL de la API como variables de entorno NEXT_PUBLIC.
Paso del flujo de trabajo
Cree un componente de cliente para el estado del chat y la interacción del navegador.
Paso del flujo de trabajo
Importe ese componente de cliente desde una página o diseño de componente de servidor.
Lanzamiento en tres pasos
Pegue su URL Siguiente.js, pruebe las respuestas citadas y luego instale el widget.
Integración del enrutador de aplicaciones
Agregue interactividad sin renunciar a la renderización del servidor
Mantenga el SDK en el borde del cliente donde ocurre la interacción de chat y conserve los componentes del servidor para el resto de la aplicación.
02
Claridad de clave pública
Utilice una clave de proyecto segura para el navegador con orígenes permitidos; nunca exponga las credenciales de administración a través de variables NEXT_PUBLIC.
03
UI de producto personalizada
Representa mensajes y citas en tu propia navegación, área de cuenta, shell de documentos o flujo de trabajo de soporte.
04
Sin servicio RAG personalizado
Evite agregar controladores de ruta únicamente para representar una API de navegador administrada a menos que su producto tenga un requisito concreto del lado del servidor.
Ruta de instalación
Cree un cliente de chat de Next.js App Router
El SDK utiliza credenciales de proyecto visibles y de recuperación del navegador, así que inicialícelo en un módulo de cliente. Mantenga los secretos y las API de administración fuera de las variables NEXT_PUBLIC.
- 1Instale el paquete npm y configure una clave pública de origen restringido.
- 2Crea un componente use client que gestione el estado de los mensajes y la conversación.
- 3Renderice el componente desde su página renderizada por el servidor sin convertir toda la ruta en un componente del cliente.
app/components/chat.tsx
tsx
'use client';
import { useState } from 'react';
import { Chattybox } from '@openstaticfish/chattybox';
const chattybox = new Chattybox({
apiKey: process.env.NEXT_PUBLIC_CHATTYBOX_API_KEY!,
baseUrl: process.env.NEXT_PUBLIC_CHATTYBOX_API_URL!,
});
export function Chat() {
const [answer, setAnswer] = useState('');
async function ask(message: string) {
const response = await chattybox.sendMessage({ message });
setAnswer(response.message);
}
return <div aria-live="polite">{answer}</div>;
}Explora lo siguiente
Más formas de usar ChattyBox
01
SDK de chatbot de JavaScript
Revise el paquete subyacente y los límites de la infraestructura administrada.
Abrir
02
SDK de chatbot de reacción
Vea los patrones de estado y componentes compartidos por las aplicaciones React.
Abrir
03
Referencia de la API del SDK
Revise los campos de respuesta, las conversaciones de seguimiento y los errores.
Abrir
04
Widget Next.js alojado
Utilice next/script y la interfaz de usuario del widget mantenida para una experiencia de chat sin compilación.
Abrir
Preguntas frecuentes
Preguntas comunes
¿El SDK de ChattyBox funciona con el enrutador de aplicaciones Next.js?
Sí. Úselo en un componente del cliente para el estado del chat interactivo y represente ese componente desde una página o diseño de App Router.
¿Necesito un controlador de ruta Next.js para ChattyBox?
No para la integración normal del navegador. Las claves de widget públicas están diseñadas para uso del cliente y pueden restringirse a orígenes aprobados.
¿Las claves de NEXT_PUBLIC ChattyBox son secretas?
La clave del widget público identifica un proyecto pero no es una credencial de administración. Restrinjalo a sus orígenes de producción y vista previa, y nunca exponga secretos administrativos.
¿Puedo utilizar el widget ChattyBox alojado con Next.js?
Sí. La guía de instalación del widget alojado muestra cómo usar next/script si prefieres una interfaz mantenida en lugar de crear una propia con el SDK.
Empieza gratis
No se requiere tarjeta de crédito. Tu contenido no se usa para entrenar modelos.
Crear chatbot gratis
Plan Free. Sin tarjeta.