Passer au contenu principal
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ées
Réponses citées par la source
S'intègre avec un seul script
Aucune migration de documents requise
Aucune carte de crédit requiseVotre contenu reste à vous
Demander à ChattyBox
x
Par 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 stack de docs

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.

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.
Étape du workflow

Installez le SDK JavaScript dans votre application React.

Étape du workflow

Créez un seul client Chattybox en dehors du chemin de rendu du composant.

Étape du workflow

Envoyez les messages depuis un gestionnaire d'événement et mettez à jour l'état de l'interface avec la réponse.

É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.

Créer un chatbot React
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é.

01

Maîtrise des composants

Composez les messages, cartes de citation, suggestions, états vides et commandes avec vos propres composants React.

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.

  1. 1Ajoutez @openstaticfish/chattybox à l'application React.
  2. 2Initialisez le client avec les variables d'environnement publiques de Vite ou de votre framework.
  3. 3Stockez le message, les sources et l'identifiant de conversation renvoyés dans un état propre au visiteur.
Créer un chatbot React
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>;
}
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.