01
Propiedad de los componentes
Redacte mensajes, tarjetas de citas, mensajes, estados vacíos y controles desde sus propios componentes de React.
Reaccionar SDK de chatbot
Construye el tuyo propio Reaccionar la interfaz de usuario del chatbot
Conecte los componentes de React a ChattyBox con @openstaticfish/chattybox. Su equipo controla la representación y el estado, mientras que la infraestructura administrada maneja las respuestas basadas en fuentes, las citas y la continuidad de las conversaciones.
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^
Reaccionar guía
chattybox.ai
Analítica
chattybox.ai
Inicio
chattybox.ai
Haz una pregunta...
Con tecnología de ChattyBox
Construido para Reaccionar equipos de productos
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.
Cree componentes personalizados de mensajes, citas, carga, respaldo y error.
Mantenga los ID de conversación en el estado React de ámbito de visitante para preguntas de seguimiento.
Utilice claves API públicas de origen restringido de forma segura en aplicaciones de navegador.
Evite mantener su propio rastreador, almacén de vectores, servicio de recuperación o canal de generación.
Paso del flujo de trabajo
Instale el SDK de JavaScript en su aplicación React.
Paso del flujo de trabajo
Cree un cliente Chattybox fuera de la ruta de procesamiento del componente.
Paso del flujo de trabajo
Envíe mensajes desde un controlador de eventos y actualice el estado de la interfaz de usuario con la respuesta.
Paso del flujo de trabajo
Represente enlaces de origen y maneje fallas estructuradas de ChattyboxError.
Lanzamiento en tres pasos
Pegue su URL Reaccionar, pruebe las respuestas citadas y luego instale el widget.
Reaccionar integración
Integre el chat conectado a su sistema de componentes existente
Utilice los patrones de estado, accesibilidad, estilo y sistema de diseño que su aplicación ya sigue en lugar de adaptarse a un shell de widget fijo.
02
Estado en sus términos
Utilice el estado local o su capa de estado existente mientras mantiene las conversaciones aisladas entre los visitantes.
03
Respuestas accesibles
Controle el foco, las regiones activas, el comportamiento del teclado y los anuncios de errores dentro de su aplicación.
04
backend administrado
Mantenga pequeña la integración del navegador mientras ChattyBox maneja la indexación de contenido, la recuperación y las respuestas citadas.
Ruta de instalación
Conecte un componente de React a ChattyBox
Cree el cliente una vez, llámelo desde un controlador de eventos y mantenga el ID de conversación de cada visitante en el estado de componente o aplicación.
- 1Agregue @openstaticfish/chattybox a la aplicación React.
- 2Inicialice el cliente con Vite o variables de entorno públicas proporcionadas por el marco.
- 3Almacene el mensaje devuelto, las fuentes y el ID de la conversación en estado de ámbito de visitante.
Chat.tsx
tsx
import { useState } from 'react';
import { Chattybox } from '@openstaticfish/chattybox';
const chattybox = new Chattybox({
apiKey: import.meta.env.VITE_CHATTYBOX_API_KEY,
baseUrl: import.meta.env.VITE_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
Comprender el cliente subyacente, el modelo de respuesta y los límites de la infraestructura.
Abrir
02
Chatbot de IA Next.js
Aplique el cliente React dentro de los límites de un cliente de App Router.
Abrir
03
Referencia de la API del SDK
Revisar la continuación de la conversación y el manejo estructurado de errores.
Abrir
04
Widget de reacción alojado
Utilice la interfaz de usuario mantenida basada en scripts en lugar de crear componentes personalizados.
Abrir
Preguntas frecuentes
Preguntas comunes
¿Puedo crear un chatbot React personalizado con ChattyBox?
Sí. El SDK de JavaScript devuelve mensajes, ID de conversación y URL de origen para que su aplicación React pueda representar una interfaz completamente personalizada.
¿ChattyBox proporciona un componente React?
El SDK es intencionalmente sin cabeza. Esto permite a los equipos utilizar su propia biblioteca de componentes, comportamiento de accesibilidad, gestión de estado y diseño de productos.
¿Dónde debo crear el cliente Chattybox en React?
Créelo una vez fuera de la ruta de renderizado del componente o en un proveedor de aplicaciones estable en lugar de construir un nuevo cliente para cada renderizado.
¿Puedo usar el widget alojado en React?
Sí. Utilice la guía de instalación del widget alojado cuando desee una interfaz mantenida en lugar de una representación personalizada de React.
Empieza gratis
No se requiere tarjeta de crédito. Tu contenido no se usa para entrenar modelos.
Crear chatbot gratis
Plan Free. Sin tarjeta.