Kontrola nad komponentami
Twórz wiadomości, karty cytowań, podpowiedzi, puste stany i elementy sterujące z własnych komponentów React.
Połącz komponenty React z ChattyBox za pomocą @openstaticfish/chattybox. Twój zespół kontroluje renderowanie i stan, a zarządzana infrastruktura obsługuje odpowiedzi oparte na źródłach, cytowania i ciągłość konwersacji.
ChattyBox przeszukuje istniejącą dokumentację, indeksuje treść w celu pobrania i osadza chatbota, który odpowiada, korzystając z dokumentów zamiast ogólnej pamięci modelu.
Zainstaluj SDK JavaScript w aplikacji React.
Utwórz jednego klienta Chattybox poza ścieżką renderowania komponentu.
Wysyłaj wiadomości z procedury obsługi zdarzenia i aktualizuj stan interfejsu odpowiedzią.
Wyświetlaj linki do źródeł i obsługuj ustrukturyzowane błędy ChattyboxError.
Uruchomienie w trzech krokach
Korzystaj z wzorców stanu, dostępności, stylów i systemu projektowego używanych już w aplikacji, zamiast dopasowywać się do sztywnej obudowy widżetu.
Twórz wiadomości, karty cytowań, podpowiedzi, puste stany i elementy sterujące z własnych komponentów React.
Używaj stanu lokalnego lub istniejącej warstwy stanu, zachowując rozdzielenie konwersacji poszczególnych odwiedzających.
Kontroluj fokus, aktywne regiony, obsługę klawiatury i komunikaty o błędach we własnej aplikacji.
Utrzymuj małą integrację przeglądarkową, podczas gdy ChattyBox obsługuje indeksowanie treści, wyszukiwanie i odpowiedzi z cytowaniami.
Utwórz klienta raz, wywołuj go z procedury obsługi zdarzenia i przechowuj identyfikator konwersacji każdego odwiedzającego w stanie komponentu lub aplikacji.
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>;
}Poznaj bazowego klienta, model odpowiedzi i granice infrastruktury.
Użyj klienta React wewnątrz granicy klienta App Router.
Poznaj kontynuowanie konwersacji i obsługę ustrukturyzowanych błędów.
Użyj utrzymywanego interfejsu opartego na skrypcie zamiast tworzyć własne komponenty.
Tak. SDK JavaScript zwraca wiadomości, identyfikatory konwersacji i adresy URL źródeł, dzięki czemu aplikacja React może wyświetlać całkowicie własny interfejs.
SDK celowo nie narzuca interfejsu. Zespoły mogą używać własnej biblioteki komponentów, zachowań dostępności, zarządzania stanem i projektu produktu.
Utwórz go raz poza ścieżką renderowania komponentu lub w stabilnym providerze aplikacji, zamiast konstruować nowego klienta przy każdym renderowaniu.
Tak. Skorzystaj z przewodnika instalacji hostowanego widżetu, jeśli wolisz utrzymywany interfejs zamiast własnego renderowania w React.
Karta kredytowa nie jest wymagana. Twoje treści nie są używane do trenowania modeli.
Plan Free. Bez karty.