Přejít na hlavní obsah
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
x
Kde 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.

Vytvořit chatbot v Reactu
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á.

01

Vlastní komponenty

Sestavte zprávy, karty citací, výzvy, prázdné stavy a ovládací prvky ze svých vlastních komponent React.

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.

  1. 1Přidejte @openstaticfish/chattybox do aplikace React.
  2. 2Inicializujte klienta pomocí veřejných proměnných prostředí z Vite nebo používaného frameworku.
  3. 3Uložte vrácenou zprávu, zdroje a ID konverzace do stavu vyhrazeného návštěvníkovi.
Vytvořit chatbot v Reactu
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>;
}
Č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.