01
Maîtrise des composants
Composez les messages, cartes de citation, suggestions, états vides et commandes avec vos propres composants React.
SDK de chatbot React
Créez votre propre interface de chatbot React
Connectez vos composants React à ChattyBox avec @openstaticfish/chattybox. Votre équipe maîtrise l'affichage et l'état tandis que l'infrastructure gérée fournit des réponses fondées sur les sources, des citations et la continuité des conversations.
Analyse les pages de documents publiéesRéponses citées par la sourceS'intègre avec un seul scriptAucune migration de documents requiseAucune carte de crédit requiseVotre contenu reste à vous
Demander à ChattyBox
xPar où commencer si j’ai besoin d’une réponse fiable depuis ce site ?
Commencez par ajouter l’URL de votre site web à ChattyBox. Il explore votre contenu, répond à partir des pages trouvées et montre aux visiteurs les sources derrière chaque réponse.
iSources citées3^
Intégration React Guide
chattybox.ai
Statistiques
chattybox.ai
Accueil
chattybox.ai
Posez une question...
Propulsé par ChattyBox
Conçu pour Équipes produit React
Lancez un chatbot avec citations de sources sans reconstruire votre pile de site
ChattyBox explore votre site existant, votre documentation, votre centre d'aide, votre CMS ou votre base de connaissances, puis intègre un chatbot qui répond à partir de votre propre contenu publié plutôt qu'à partir de la mémoire générique d'un modèle.
Créez des composants personnalisés pour les messages, les citations, le chargement, les réponses de repli et les erreurs.
Conservez les identifiants de conversation dans un état React propre à chaque visiteur pour les questions de suivi.
Utilisez en toute sécurité des clés API publiques limitées par origine dans les applications pour navigateur.
Évitez de maintenir votre propre robot d'exploration, base vectorielle, service de recherche ou pipeline de génération.
1Étape du workflow
Installez le SDK JavaScript dans votre application React.
2Étape du workflow
Créez un seul client Chattybox en dehors du chemin de rendu du composant.
3Étape du workflow
Envoyez les messages depuis un gestionnaire d'événement et mettez à jour l'état de l'interface avec la réponse.
4Étape du workflow
Affichez les liens vers les sources et gérez les erreurs structurées ChattyboxError.
Un lancement en trois étapes
Collez votre URL Intégration React, testez les réponses citées, puis installez le widget.
Intégration React
Intégrez un chat fondé sur les sources à votre système de composants
Utilisez les conventions d'état, d'accessibilité, de style et de design system déjà suivies par votre application au lieu de vous adapter à l'enveloppe d'un widget figé.
Chemin de décision
Utilisez ces points de contrôle pour décider si ChattyBox doit s'asseoir à côté de votre plate-forme de documents, remplacer un assistant distinct ou rester isolé pour les tests.
02
Un état à votre façon
Utilisez un état local ou votre couche d'état existante tout en isolant les conversations entre les visiteurs.
03
Réponses accessibles
Gérez le focus, les régions live, le clavier et l'annonce des erreurs au sein de votre application.
04
Backend géré
Gardez une intégration légère dans le navigateur pendant que ChattyBox gère l'indexation du contenu, la recherche et les réponses avec citations.
Parcours d’installation
Connecter un composant React à ChattyBox
Créez le client une seule fois, appelez-le depuis un gestionnaire d'événement et conservez l'identifiant de conversation de chaque visiteur dans l'état du composant ou de l'application.
- 1Ajoutez @openstaticfish/chattybox à l'application React.
- 2Initialisez le client avec les variables d'environnement publiques de Vite ou de votre framework.
- 3Stockez le message, les sources et l'identifiant de conversation renvoyés dans un état propre au visiteur.
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>;
}À explorer ensuite
Plus de façons d’utiliser ChattyBox
01SDK de chatbot JavaScriptDécouvrez le client sous-jacent, le modèle de réponse et la frontière de l'infrastructure.02Chatbot IA Next.jsUtilisez le client React dans une frontière client de l'App Router.03Référence de l'API du SDKConsultez la poursuite des conversations et la gestion structurée des erreurs.04Widget React hébergéUtilisez l'interface maintenue basée sur un script plutôt que de créer des composants personnalisés.
Questions fréquentes
Questions fréquentes
1
Puis-je créer un chatbot React personnalisé avec ChattyBox ?
Oui. Le SDK JavaScript renvoie des messages, des identifiants de conversation et des URL de sources afin que votre application React puisse afficher une interface entièrement personnalisée.
2
ChattyBox fournit-il un composant React ?
Le SDK est volontairement headless. Les équipes peuvent ainsi utiliser leur propre bibliothèque de composants, leur comportement d'accessibilité, leur gestion d'état et leur design produit.
3
Où dois-je créer le client Chattybox dans React ?
Créez-le une fois en dehors du chemin de rendu du composant ou dans un provider applicatif stable, plutôt que de construire un nouveau client à chaque rendu.
4
Puis-je utiliser le widget hébergé dans React à la place ?
Oui. Suivez le guide d'installation du widget hébergé si vous préférez une interface maintenue à un affichage React personnalisé.
Commencer gratuitement
Aucune carte de crédit requise. Votre contenu n’est pas utilisé pour l’entraînement de modèles.
Créer un chatbot gratuit
Niveau Free. Aucune carte requise.