Hoppa till huvudinnehållet
React-SDK för chattbotar

Bygg din egen Reager chatbot UI

Anslut React-komponenter till ChattyBox med @openstaticfish/chattybox. Ditt team kontrollerar rendering och status medan hanterad infrastruktur hanterar källgrundade svar, citat och konversationskontinuitet.

Genomsöker publicerade dokumentsidor
Källangivna svar
Bäddar in med ett skript
Ingen dokumentmigrering krävs
Inget kreditkort krävsDitt innehåll förblir ditt
Fråga ChattyBox
x
Var ska jag börja om jag behöver ett tillförlitligt svar från den här webbplatsen?
Börja med att lägga till din webbplats-URL i ChattyBox. Den genomsöker ditt innehåll, svarar utifrån sidorna den hittar och visar besökare källorna bakom varje svar.
iKällor3^
Reagera vägledning
chattybox.ai
Analys
chattybox.ai
Hem
chattybox.ai
Ställ en fråga...
Drivs av ChattyBox
Byggd för Reagera produktteam

Lansera en chattbot med källhänvisningar utan att bygga om din docs-stack

ChattyBox crawlar din befintliga dokumentation, indexerar innehållet för hämtning och bäddar in en chattbot som svarar med dina docs i stället för generiskt modellminne.

Skapa anpassade meddelande-, citerings-, laddnings-, reserv- och felkomponenter.
Behåll konversations-ID:n i React-läge med besökaromfattning för uppföljningsfrågor.
Använd API-nycklar som begränsas av offentligt ursprung på ett säkert sätt i webbläsarapplikationer.
Undvik att underhålla din egen sökrobot, vektorbutik, hämtningstjänst eller genereringspipeline.
Arbetsflödessteg

Installera JavaScript SDK i din React-applikation.

Arbetsflödessteg

Skapa en Chattybox-klient utanför komponentrenderingssökvägen.

Arbetsflödessteg

Skicka meddelanden från en händelsehanterare och uppdatera UI-tillståndet med svaret.

Arbetsflödessteg

Återge källlänkar och hantera strukturerade ChattyboxError-fel.

Lansering i tre steg

Klistra in din Reagera URL, testa citerade svar och installera sedan widgeten.

Bygg en React chatbot
Reagera integration

Anpassa jordad chatt i ditt befintliga komponentsystem

Använd tillstånd, tillgänglighet, stil och designsystem som din applikation redan följer istället för att anpassa till ett fast widgetskal.

01

Komponentägande

Skriv meddelanden, citatkort, uppmaningar, tomma tillstånd och kontroller från dina egna React-komponenter.

02

Ange på dina villkor

Använd lokala tillstånd eller ditt befintliga tillståndslager samtidigt som konversationer isoleras mellan besökare.

03

Tillgängliga svar

Kontrollera fokus, liveregioner, tangentbordsbeteende och felmeddelanden i din applikation.

04

Hanterad backend

Håll webbläsarintegrationen liten medan ChattyBox hanterar innehållsindexering, hämtning och citerade svar.

Installationsväg

Anslut en React-komponent till ChattyBox

Skapa klienten en gång, anrop den från en händelsehanterare och håll varje besökskonversations-ID i komponent- eller applikationstillstånd.

  1. 1Lägg till @openstaticfish/chattybox till React-applikationen.
  2. 2Initiera klienten med Vite eller ramverksvariabler för offentlig miljö.
  3. 3Lagra det returnerade meddelandet, källorna och konversations-ID:t i besökaromfattning.
Bygg en 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>;
}
Vanliga frågor

Vanliga frågor

1

Kan jag bygga en anpassad React-chatbot med ChattyBox?

Ja. JavaScript-SDK:n returnerar meddelanden, konversations-ID:n och källadresser så att din React-applikation kan återge ett helt anpassat gränssnitt.

2

Tillhandahåller ChattyBox en React-komponent?

SDK:n är avsiktligt utan huvud. Detta låter team använda sitt eget komponentbibliotek, tillgänglighetsbeteende, tillståndshantering och produktdesign.

3

Var ska jag skapa Chattybox-klienten i React?

Skapa den en gång utanför komponentrenderingsvägen eller i en stabil applikationsleverantör istället för att bygga en ny klient för varje rendering.

4

Kan jag använda den värdbaserade widgeten i React istället?

Ja. Använd installationsguiden för den värdbaserade widgeten när du vill ha ett underhållet gränssnitt snarare än anpassad React-rendering.

Starta gratis

Inget kreditkort krävs. Ditt innehåll används inte för modellträning.

Skapa gratis chatbot

Free-nivå. Inget kort behövs.