Passa al contenuto principale
ReactChatbot SDK

Costruisci il tuo Interfaccia chatbot React

Collega i componenti React a ChattyBox con @openstaticfish/chattybox. Il tuo team controlla il rendering e lo stato mentre l'infrastruttura gestita gestisce risposte basate sulla fonte, citazioni e continuità della conversazione.

Esegue la scansione delle pagine dei documenti pubblicati
Risposte citate dalla fonte
Incorpora con uno script
Non è richiesta la migrazione dei documenti
Nessuna carta di credito richiestaI tuoi contenuti restano tuoi
Chiedi a ChattyBox
x
Da dove dovrei iniziare se mi serve una risposta affidabile da questo sito?
Inizia aggiungendo l'URL del tuo sito web a ChattyBox. Scansiona i tuoi contenuti, risponde dalle pagine che trova e mostra ai visitatori le fonti dietro ogni risposta.
iFonti3^
Integrazione React guida
chattybox.ai
Analisi
chattybox.ai
Pagina iniziale
chattybox.ai
Fai una domanda...
Offerto da ChattyBox
Costruito per React team di prodotto

Avvia un chatbot citato alla fonte senza ricostruire lo stack di documenti

ChattyBox esegue la scansione della documentazione esistente, indicizza il contenuto per il recupero e incorpora un chatbot che risponde utilizzando i tuoi documenti anziché la memoria del modello generico.

Crea componenti personalizzati per messaggi, citazioni, caricamenti, fallback ed errori.
Mantieni gli ID conversazione nello stato React limitato ai visitatori per le domande di follow-up.
Utilizza in modo sicuro le chiavi API pubbliche limitate dall'origine nelle applicazioni browser.
Evita di mantenere il tuo crawler, archivio vettoriale, servizio di recupero o pipeline di generazione.
Passaggio del workflow

Installa JavaScript SDK nella tua applicazione React.

Passaggio del workflow

Crea un client Chattybox fuori dal percorso di rendering del componente.

Passaggio del workflow

Invia messaggi da un gestore eventi e aggiorna lo stato UI con la risposta.

Passaggio del workflow

Eseguire il rendering dei collegamenti di origine e gestire gli errori strutturati ChattyboxError.

Lancio in tre fasi

Incolla il tuo URL Integrazione React, prova le risposte citate, quindi installa il widget.

Costruisci un chatbot React
React integrazione

Adatta la chat basata sul tuo sistema di componenti esistente

Utilizza i modelli di stato, accessibilità, stile e sistema di progettazione già seguiti dalla tua applicazione invece di adattarti a una shell di widget fissa.

01

Proprietà dei componenti

Componi messaggi, schede di citazione, prompt, stati vuoti e controlli dai tuoi componenti React.

02

Dichiarate alle vostre condizioni

Utilizza lo stato locale o il livello di stato esistente mantenendo isolate le conversazioni tra i visitatori.

03

Risposte accessibili

Controlla il focus, le regioni live, il comportamento della tastiera e gli annunci di errore all'interno della tua applicazione.

04

Backend gestito

Mantieni ridotta l'integrazione del browser mentre ChattyBox gestisce l'indicizzazione, il recupero e le risposte citate dei contenuti.

Percorso di installazione

Collega un componente React a ChattyBox

Crea il client una volta, chiamalo da un gestore eventi e mantieni l'ID di conversazione di ciascun visitatore nello stato del componente o dell'applicazione.

  1. 1Aggiungi @openstaticfish/chattybox all'applicazione React.
  2. 2Inizializza il client con Vite o variabili di ambiente pubbliche fornite dal framework.
  3. 3Archivia il messaggio restituito, le origini e l'ID conversazione nello stato con ambito visitatore.
Costruisci 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>;
}
Domande frequenti

Domande comuni

1

Posso creare un chatbot React personalizzato con ChattyBox?

SÌ. JavaScript SDK restituisce messaggi, ID di conversazione e URL di origine in modo che la tua applicazione React possa eseguire il rendering di un'interfaccia completamente personalizzata.

2

ChattyBox fornisce un componente React?

Il SDK è intenzionalmente senza testa. Ciò consente ai team di utilizzare la propria libreria di componenti, il comportamento di accessibilità, la gestione dello stato e la progettazione del prodotto.

3

Dove devo creare il client Chattybox in React?

Crealo una volta fuori dal percorso di rendering del componente o in un fornitore di applicazioni stabile anziché costruire un nuovo client per ogni rendering.

4

Posso invece utilizzare il widget ospitato in React?

SÌ. Utilizza la guida all'installazione del widget ospitato quando desideri un'interfaccia mantenuta anziché un rendering React personalizzato.

Inizia gratis

Nessuna carta di credito richiesta. I tuoi contenuti non vengono usati per addestrare modelli.

Crea chatbot gratuiti

Piano Free. Nessuna carta.