01
Proprietà dei componenti
Componi messaggi, schede di citazione, prompt, stati vuoti e controlli dai tuoi componenti React.
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 pubblicatiRisposte citate dalla fonteIncorpora con uno scriptNon è richiesta la migrazione dei documentiNessuna carta di credito richiestaI tuoi contenuti restano tuoi
Chiedi a ChattyBox
xDa 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
Lancia un chatbot con citazioni delle fonti senza ricostruire lo stack del tuo sito
ChattyBox esegue la scansione del tuo sito web esistente, della documentazione, del centro assistenza, del CMS o della knowledge base, quindi incorpora un chatbot che risponde dai tuoi contenuti pubblicati invece che dalla memoria generica del modello.
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.
1Passaggio del workflow
Installa JavaScript SDK nella tua applicazione React.
2Passaggio del workflow
Crea un client Chattybox fuori dal percorso di rendering del componente.
3Passaggio del workflow
Invia messaggi da un gestore eventi e aggiorna lo stato UI con la risposta.
4Passaggio 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.
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.
Percorso decisionale
Utilizza questi punti di controllo per decidere se ChattyBox deve essere affiancato alla tua piattaforma di documenti, sostituire un assistente separato o rimanere isolato per i test.
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.
- 1Aggiungi @openstaticfish/chattybox all'applicazione React.
- 2Inizializza il client con Vite o variabili di ambiente pubbliche fornite dal framework.
- 3Archivia il messaggio restituito, le origini e l'ID conversazione nello stato con ambito visitatore.
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>;
}Esplora ora
Altri modi per usare ChattyBox
01SDK per chatbot JavaScriptComprendere il client sottostante, il modello di risposta e il confine dell'infrastruttura.02Next.js Chatbot con intelligenza artificialeApplica il client React all'interno del limite del client App Router.03SDK API riferimentoEsaminare la continuazione della conversazione e la gestione strutturata degli errori.04Widget React ospitatoUtilizza UI basato su script mantenuto invece di creare componenti personalizzati.
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.