01
Kontrola nad komponentami
Twórz wiadomości, karty cytowań, podpowiedzi, puste stany i elementy sterujące z własnych komponentów React.
SDK chatbota dla React
Zbuduj własny interfejs chatbota 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.
Indeksuje opublikowane strony dokumentacji
Odpowiedzi z cytowaniami źródeł
Osadzenie jednym skryptem
Bez migracji dokumentacji
Karta kredytowa nie jest wymaganaTwoje treści pozostają Twoje
Zapytaj ChattyBox
xOd czego zacząć, jeśli potrzebuję wiarygodnej odpowiedzi z tej strony?
Zacznij od dodania adresu URL swojej strony do ChattyBox. Narzędzie indeksuje Twoje treści, odpowiada na podstawie znalezionych stron i pokazuje odwiedzającym źródła każdej odpowiedzi.
iŹródła3^
Integracja z React przewodnik
chattybox.ai
Analityka
chattybox.ai
Strona główna
chattybox.ai
Zadaj pytanie...
Obsługiwane przez ChattyBox
Zbudowany dla Zespoły produktowe korzystające z React
Uruchom chatbota cytowanego w źródle bez konieczności ponownego tworzenia stosu dokumentów
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.
Twórz własne komponenty wiadomości, cytowań, ładowania, odpowiedzi awaryjnych i błędów.
Przechowuj identyfikatory konwersacji w stanie React przypisanym do odwiedzającego, aby obsługiwać kolejne pytania.
Bezpiecznie używaj w aplikacjach przeglądarkowych publicznych kluczy API ograniczonych do zatwierdzonych źródeł.
Nie utrzymuj własnego robota, bazy wektorowej, usługi wyszukiwania ani potoku generowania.
Krok przepływu pracy
Zainstaluj SDK JavaScript w aplikacji React.
Krok przepływu pracy
Utwórz jednego klienta Chattybox poza ścieżką renderowania komponentu.
Krok przepływu pracy
Wysyłaj wiadomości z procedury obsługi zdarzenia i aktualizuj stan interfejsu odpowiedzią.
Krok przepływu pracy
Wyświetlaj linki do źródeł i obsługuj ustrukturyzowane błędy ChattyboxError.
Uruchomienie w trzech krokach
Wklej swój adres URL Integracja z React, przetestuj cytowane odpowiedzi, a następnie zainstaluj widżet.
Integracja z React
Dopasuj czat oparty na źródłach do istniejącego systemu komponentów
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.
02
Stan na Twoich zasadach
Używaj stanu lokalnego lub istniejącej warstwy stanu, zachowując rozdzielenie konwersacji poszczególnych odwiedzających.
03
Dostępne odpowiedzi
Kontroluj fokus, aktywne regiony, obsługę klawiatury i komunikaty o błędach we własnej aplikacji.
04
Zarządzany backend
Utrzymuj małą integrację przeglądarkową, podczas gdy ChattyBox obsługuje indeksowanie treści, wyszukiwanie i odpowiedzi z cytowaniami.
Ścieżka instalacji
Połącz komponent React z ChattyBox
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.
- 1Dodaj @openstaticfish/chattybox do aplikacji React.
- 2Zainicjuj klienta publicznymi zmiennymi środowiskowymi Vite lub używanego frameworka.
- 3Przechowuj zwróconą wiadomość, źródła i identyfikator konwersacji w stanie przypisanym do odwiedzającego.
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>;
}Zobacz dalej
Więcej sposobów użycia ChattyBox
01
SDK chatbota dla JavaScript
Poznaj bazowego klienta, model odpowiedzi i granice infrastruktury.
Otwórz
02
Chatbot AI dla Next.js
Użyj klienta React wewnątrz granicy klienta App Router.
Otwórz
03
Dokumentacja API SDK
Poznaj kontynuowanie konwersacji i obsługę ustrukturyzowanych błędów.
Otwórz
04
Hostowany widżet dla React
Użyj utrzymywanego interfejsu opartego na skrypcie zamiast tworzyć własne komponenty.
Otwórz
Najczęstsze pytania
Często zadawane pytania
Czy mogę zbudować własnego chatbota React za pomocą ChattyBox?
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.
Czy ChattyBox udostępnia komponent React?
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.
Gdzie utworzyć klienta Chattybox w React?
Utwórz go raz poza ścieżką renderowania komponentu lub w stabilnym providerze aplikacji, zamiast konstruować nowego klienta przy każdym renderowaniu.
Czy zamiast tego mogę użyć hostowanego widżetu w React?
Tak. Skorzystaj z przewodnika instalacji hostowanego widżetu, jeśli wolisz utrzymywany interfejs zamiast własnego renderowania w React.
Zacznij bezpłatnie
Karta kredytowa nie jest wymagana. Twoje treści nie są używane do trenowania modeli.
Stwórz darmowego chatbota
Plan Free. Bez karty.