01
Vlastní komponenty
Sestavte zprávy, karty citací, výzvy, prázdné stavy a ovládací prvky ze svých vlastních komponent React.
SDK pro chatbot v Reactu
Vytvořte si vlastní chatovací UI v Reactu
Propojte komponenty React s ChattyBoxem pomocí @openstaticfish/chattybox. Váš tým ovládá vykreslování a stav, zatímco spravovaná infrastruktura zajišťuje odpovědi založené na zdrojích, citace a návaznost konverzace.
Prochází stránky publikovaných dokumentůOdpovědi citované zdrojemVloží s jedním skriptemNevyžaduje se migrace dokumentůNení vyžadována kreditní kartaVáš obsah zůstává váš
Zeptejte se ChattyBox
xKde mám začít, když potřebuji spolehlivou odpověď z tohoto webu?
Začněte přidáním adresy URL svého webu do ChattyBox. Prochází váš obsah, odpovídá ze stránek, které najde, a ukazuje návštěvníkům zdroje za každou odpovědí.
iZdroje3^
Platforma React průvodce
chattybox.ai
Analytika
chattybox.ai
Domov
chattybox.ai
Zeptejte se...
Běží na ChattyBox
Vytvořeno pro Produktové týmy používající React
Spusťte chatbota s citacemi zdrojů bez přestavby svého webového zásobníku
ChattyBox prochází váš stávající web, dokumentaci, centrum nápovědy, CMS nebo znalostní bázi a poté vloží chatbota, který odpovídá na základě vašeho publikovaného obsahu, nikoli obecné paměti modelu.
Vytvořte vlastní komponenty pro zprávy, citace, načítání, záložní odpovědi a chyby.
Uchovávejte ID konverzací ve stavu Reactu vyhrazeném jednotlivým návštěvníkům pro navazující otázky.
Používejte v aplikacích pro prohlížeče bezpečně veřejné klíče API omezené na povolené zdroje.
Nemusíte udržovat vlastní crawler, vektorové úložiště, vyhledávací službu ani generovací pipeline.
1Krok pracovního postupu
Nainstalujte JavaScript SDK do své aplikace React.
2Krok pracovního postupu
Vytvořte jednoho klienta Chattybox mimo cestu vykreslování komponenty.
3Krok pracovního postupu
Odesílejte zprávy z obsluhy události a aktualizujte stav UI pomocí odpovědi.
4Krok pracovního postupu
Vykreslete odkazy na zdroje a ošetřete strukturovaná selhání ChattyboxError.
Spuštění ve třech krocích
Vložte svou adresu URL Platforma React, otestujte citované odpovědi a nainstalujte widget.
Integrace s Reactem
Začleňte chat založený na zdrojích do svého stávajícího systému komponent
Namísto přizpůsobování se pevnému obalu widgetu použijte vzory pro stav, přístupnost, stylování a design systém, které vaše aplikace už využívá.
Cesta rozhodnutí
Pomocí těchto kontrolních bodů se můžete rozhodnout, zda má ChattyBox sedět vedle vaší platformy dokumentů, nahradit samostatného asistenta nebo zůstat izolovaný pro testování.
02
Stav podle vašich pravidel
Použijte lokální stav nebo svou stávající stavovou vrstvu a současně udržujte konverzace jednotlivých návštěvníků oddělené.
03
Přístupné odpovědi
Ovládejte ve své aplikaci fokus, živé oblasti, chování klávesnice a oznamování chyb.
04
Spravovaný backend
Integrace v prohlížeči zůstává malá, zatímco ChattyBox zajišťuje indexování obsahu, vyhledávání a odpovědi s citacemi.
Instalační cesta
Propojte komponentu React s ChattyBoxem
Vytvořte klienta jednou, volejte ho z obsluhy události a uchovávejte ID konverzace každého návštěvníka ve stavu komponenty nebo aplikace.
- 1Přidejte @openstaticfish/chattybox do aplikace React.
- 2Inicializujte klienta pomocí veřejných proměnných prostředí z Vite nebo používaného frameworku.
- 3Uložte vrácenou zprávu, zdroje a ID konverzace do stavu vyhrazeného návštěvníkovi.
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>;
}Další prozkoumat
Více způsobů, jak používat ChattyBox
01SDK pro chatbot v JavaScriptuSeznamte se se základním klientem, modelem odpovědí a hranicí spravované infrastruktury.02AI chatbot pro Next.jsPoužijte klienta React uvnitř klientské hranice App Routeru.03Referenční příručka API SDKProjděte si pokračování konverzace a strukturované zpracování chyb.04Hostovaný widget pro ReactMísto vytváření vlastních komponent použijte udržované UI založené na scriptu.
Časté dotazy
Běžné otázky
1
Mohu s ChattyBoxem vytvořit vlastní chatbot v Reactu?
Ano. JavaScript SDK vrací zprávy, ID konverzací a zdrojové URL, takže vaše aplikace React může vykreslit zcela vlastní rozhraní.
2
Poskytuje ChattyBox komponentu React?
SDK je záměrně headless. Týmy tak mohou použít vlastní knihovnu komponent, chování pro přístupnost, správu stavu a produktový design.
3
Kde mám v Reactu vytvořit klienta Chattybox?
Vytvořte ho jednou mimo cestu vykreslování komponenty nebo ve stabilním provideru aplikace, nikoli znovu při každém vykreslení.
4
Mohu místo toho použít hostovaný widget v Reactu?
Ano. Pokud chcete udržované rozhraní namísto vlastního vykreslování v Reactu, použijte průvodce instalací hostovaného widgetu.
Začněte zdarma
Není vyžadována kreditní karta. Váš obsah se nepoužívá k trénování modelů.
Vytvořte si chatbota zdarma
Tarif Free. Bez karty.