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é zdrojem
Vloží s jedním skriptem
Nevyž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 citovaným zdrojem, aniž byste museli znovu sestavovat svůj zásobník dokumentů
ChattyBox prochází vaši stávající dokumentaci, indexuje obsah pro vyhledání a vkládá chatbota, který odpovídá pomocí vašich dokumentů namísto 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.
Krok pracovního postupu
Nainstalujte JavaScript SDK do své aplikace React.
Krok pracovního postupu
Vytvořte jednoho klienta Chattybox mimo cestu vykreslování komponenty.
Krok pracovního postupu
Odesílejte zprávy z obsluhy události a aktualizujte stav UI pomocí odpovědi.
Krok 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á.
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
01
SDK pro chatbot v JavaScriptu
Seznamte se se základním klientem, modelem odpovědí a hranicí spravované infrastruktury.
OTEVŘENO
02
AI chatbot pro Next.js
Použijte klienta React uvnitř klientské hranice App Routeru.
OTEVŘENO
03
Referenční příručka API SDK
Projděte si pokračování konverzace a strukturované zpracování chyb.
OTEVŘENO
04
Hostovaný widget pro React
Místo vytváření vlastních komponent použijte udržované UI založené na scriptu.
OTEVŘENO
Časté dotazy
Běžné otázky
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í.
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.
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í.
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.