Przejdź do głównej treści
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
x
Od 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.

Zbuduj chatbota w React
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.

01

Kontrola nad komponentami

Twórz wiadomości, karty cytowań, podpowiedzi, puste stany i elementy sterujące z własnych komponentów React.

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.

  1. 1Dodaj @openstaticfish/chattybox do aplikacji React.
  2. 2Zainicjuj klienta publicznymi zmiennymi środowiskowymi Vite lub używanego frameworka.
  3. 3Przechowuj zwróconą wiadomość, źródła i identyfikator konwersacji w stanie przypisanym do odwiedzającego.
Zbuduj chatbota w React
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>;
}
Najczęstsze pytania

Często zadawane pytania

1

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.

2

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.

3

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.

4

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.