Ga naar de hoofdinhoud
SDK voor React-chatbots

Bouw je eigen React-chatbotinterface

Verbind React componenten met ChattyBox met @openstaticfish/chattybox. Uw team beheert de weergave en status, terwijl de beheerde infrastructuur brongebaseerde antwoorden, citaten en gesprekscontinuïteit afhandelt.

Crawlt gepubliceerde documentpagina's
Bronvermelde antwoorden
Ingesloten met één script
Geen documentmigratie vereist
Geen creditcard vereistJe content blijft van jou
Vraag ChattyBox
x
Waar moet ik beginnen als ik een betrouwbaar antwoord van deze site nodig heb?
Begin door uw website-URL aan ChattyBox toe te voegen. Het crawlt uw content, beantwoordt vragen vanuit de pagina's die het vindt en toont bezoekers de bronnen achter elk antwoord.
iBronnen3^
React-integratie gids
chattybox.ai
Analyse
chattybox.ai
Startpagina
chattybox.ai
Stel een vraag...
Aangedreven door ChattyBox
Gebouwd voor React productteams

Lanceer een chatbot met bronvermeldingen zonder je documentatiestack opnieuw te bouwen

ChattyBox crawlt je bestaande documentatie, indexeert de content voor retrieval en embedt een chatbot die antwoordt vanuit je documentatie in plaats van generiek modelgeheugen.

Maak aangepaste bericht-, citatie-, laad-, fallback- en foutcomponenten.
Houd gespreks-ID's in de op bezoekers gerichte status React voor vervolgvragen.
Gebruik API-sleutels met een openbare oorsprongsbeperking veilig in browsertoepassingen.
Vermijd het onderhouden van uw eigen crawler, vectoropslag, ophaalservice of generatiepijplijn.
Workflowstap

Installeer JavaScript SDK in uw React-applicatie.

Workflowstap

Maak één Chattybox-client buiten het renderpad van de component.

Workflowstap

Verzend berichten vanaf een gebeurtenishandler en update de status UI met het antwoord.

Workflowstap

Geef bronlinks weer en handel gestructureerde ChattyboxError-fouten af.

Lancering in drie stappen

Plak uw React-integratie URL, test de geciteerde antwoorden en installeer vervolgens de widget.

Bouw een React chatbot
React-integratie

Voeg geaarde chat toe aan uw bestaande componentsysteem

Gebruik de status-, toegankelijkheids-, stijl- en ontwerpsysteempatronen die uw toepassing al volgt in plaats van zich aan te passen aan een vaste widgetshell.

01

Eigendom van componenten

Stel berichten, citatiekaarten, aanwijzingen, lege statussen en bedieningselementen samen vanuit uw eigen React-componenten.

02

Geef aan wat uw voorwaarden zijn

Gebruik de lokale staat of uw bestaande staatslaag terwijl u gesprekken tussen bezoekers geïsoleerd houdt.

03

Toegankelijke reacties

Beheer de focus, liveregio's, toetsenbordgedrag en foutaankondigingen binnen uw toepassing.

04

Beheerde backend

Houd de browserintegratie klein, terwijl ChattyBox de inhoudsindexering, het ophalen en geciteerde antwoorden afhandelt.

Installatiepad

Sluit een React-component aan op ChattyBox

Maak de client één keer aan, roep deze aan vanuit een gebeurtenishandler en bewaar de gespreks-ID van elke bezoeker in de component- of applicatiestatus.

  1. 1Voeg @openstaticfish/chattybox toe aan de React-applicatie.
  2. 2Initialiseer de client met Vite of door het raamwerk geleverde openbare omgevingsvariabelen.
  3. 3Sla het geretourneerde bericht, de bronnen en de gespreks-ID op in de bezoekersstatus.
Bouw een React chatbot
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>;
}
Veelgestelde vragen

Veelgestelde vragen

1

Kan ik een aangepaste React chatbot bouwen met ChattyBox?

Ja. De JavaScript SDK retourneert berichten, gespreks-ID's en bron-URLs, zodat uw React-toepassing een volledig aangepaste interface kan weergeven.

2

Biedt ChattyBox een React-component?

De SDK is opzettelijk hoofdloos. Hierdoor kunnen teams hun eigen componentenbibliotheek, toegankelijkheidsgedrag, statusbeheer en productontwerp gebruiken.

3

Waar moet ik de Chattybox-client maken in React?

Maak het eenmalig buiten het renderpad van de component of in een stabiele applicatieprovider, in plaats van voor elke render een nieuwe client te bouwen.

4

Kan ik in plaats daarvan de gehoste widget in React gebruiken?

Ja. Gebruik de gehoste widget-installatiegids als u een onderhouden interface wilt in plaats van aangepaste React-weergave.

Gratis starten

Geen creditcard vereist. Je content wordt niet gebruikt voor modeltraining.

Maak een gratis chatbot

Gratis niveau. Geen kaart nodig.