Vlastní komponenty
Sestavte zprávy, karty citací, výzvy, prázdné stavy a ovládací prvky ze svých vlastních komponent React.
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.
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.
Nainstalujte JavaScript SDK do své aplikace React.
Vytvořte jednoho klienta Chattybox mimo cestu vykreslování komponenty.
Odesílejte zprávy z obsluhy události a aktualizujte stav UI pomocí odpovědi.
Vykreslete odkazy na zdroje a ošetřete strukturovaná selhání ChattyboxError.
Spuštění ve třech krocích
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á.
Sestavte zprávy, karty citací, výzvy, prázdné stavy a ovládací prvky ze svých vlastních komponent React.
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é.
Ovládejte ve své aplikaci fokus, živé oblasti, chování klávesnice a oznamování chyb.
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.
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.
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>;
}Seznamte se se základním klientem, modelem odpovědí a hranicí spravované infrastruktury.
Použijte klienta React uvnitř klientské hranice App Routeru.
Projděte si pokračování konverzace a strukturované zpracování chyb.
Místo vytváření vlastních komponent použijte udržované UI založené na scriptu.
Ano. JavaScript SDK vrací zprávy, ID konverzací a zdrojové URL, takže vaše aplikace React může vykreslit zcela vlastní rozhraní.
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.
Vytvořte ho jednou mimo cestu vykreslování komponenty nebo ve stabilním provideru aplikace, nikoli znovu při každém vykreslení.
Ano. Pokud chcete udržované rozhraní namísto vlastního vykreslování v Reactu, použijte průvodce instalací hostovaného widgetu.
Není vyžadována kreditní karta. Váš obsah se nepoužívá k trénování modelů.
Tarif Free. Bez karty.