Maîtrise des composants
Composez les messages, cartes de citation, suggestions, états vides et commandes avec vos propres composants 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.
ChattyBox explore votre documentation existante, indexe le contenu pour la recherche et intègre un chatbot qui répond avec vos docs plutôt qu’avec la mémoire générique du modèle.
Installez le SDK JavaScript dans votre application React.
Créez un seul client Chattybox en dehors du chemin de rendu du composant.
Envoyez les messages depuis un gestionnaire d'événement et mettez à jour l'état de l'interface avec la réponse.
Affichez les liens vers les sources et gérez les erreurs structurées ChattyboxError.
Un lancement en trois étapes
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é.
Composez les messages, cartes de citation, suggestions, états vides et commandes avec vos propres composants React.
Utilisez un état local ou votre couche d'état existante tout en isolant les conversations entre les visiteurs.
Gérez le focus, les régions live, le clavier et l'annonce des erreurs au sein de votre application.
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.
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.
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>;
}Découvrez le client sous-jacent, le modèle de réponse et la frontière de l'infrastructure.
Utilisez le client React dans une frontière client de l'App Router.
Consultez la poursuite des conversations et la gestion structurée des erreurs.
Utilisez l'interface maintenue basée sur un script plutôt que de créer des composants personnalisés.
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.
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.
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.
Oui. Suivez le guide d'installation du widget hébergé si vous préférez une interface maintenue à un affichage React personnalisé.
Aucune carte de crédit requise. Votre contenu n’est pas utilisé pour l’entraînement de modèles.
Niveau Free. Aucune carte requise.