01
Komponentägande
Skriv meddelanden, citatkort, uppmaningar, tomma tillstånd och kontroller från dina egna React-komponenter.
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 dokumentsidorKällangivna svarBäddar in med ett skriptIngen dokumentmigrering krävsInget kreditkort krävsDitt innehåll förblir ditt
Fråga ChattyBox
xVar 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.
1Arbetsflödessteg
Installera JavaScript SDK i din React-applikation.
2Arbetsflödessteg
Skapa en Chattybox-klient utanför komponentrenderingssökvägen.
3Arbetsflödessteg
Skicka meddelanden från en händelsehanterare och uppdatera UI-tillståndet med svaret.
4Arbetsflö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.
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.
Beslutsväg
Använd dessa kontrollpunkter för att bestämma om ChattyBox ska sitta bredvid din dokumentplattform, ersätta en separat assistent eller hålla sig isolerad för testning.
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.
- 1Lägg till @openstaticfish/chattybox till React-applikationen.
- 2Initiera klienten med Vite eller ramverksvariabler för offentlig miljö.
- 3Lagra det returnerade meddelandet, källorna och konversations-ID:t i besökaromfattning.
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>;
}Utforska härnäst
Fler sätt att använda ChattyBox
01JavaScript-SDK för chattbotarFörstå den underliggande klienten, svarsmodellen och infrastrukturens gräns.02AI-chattbot för Next.jsApplicera React-klienten inom en App Router-klientgräns.03SDK API-referensGranska konversationsfortsättning och strukturerad felhantering.04Hosted React-widgetAnvänd det underhållna skriptbaserade användargränssnittet istället för att bygga anpassade komponenter.
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.