Lewati ke konten utama
SDK Chatbot React

Buat sendiri UI chatbot React Anda

Hubungkan komponen React ke ChattyBox dengan @openstaticfish/chattybox. Tim Anda mengendalikan rendering dan state, sementara infrastruktur terkelola menangani jawaban berbasis sumber, sitasi, dan kelanjutan percakapan.

Merangkak halaman dokumen yang dipublikasikan
Jawaban yang dikutip dari sumber
Sematkan dengan satu skrip
Tidak diperlukan migrasi dokumen
Tidak perlu kartu kreditKonten Anda tetap milik Anda
Tanya ChattyBox
x
Di mana saya harus mulai jika membutuhkan jawaban tepercaya dari situs ini?
Mulailah dengan menambahkan URL situs web Anda ke ChattyBox. ChattyBox merayapi konten Anda, menjawab dari halaman yang ditemukan, dan menunjukkan sumber di balik setiap respons kepada pengunjung.
iSumber3^
Platform React panduan
chattybox.ai
Analitik
chattybox.ai
Beranda
chattybox.ai
Ajukan pertanyaan...
Didukung oleh ChattyBox
Dibuat untuk Tim produk React

Luncurkan chatbot yang dikutip sumber tanpa membangun kembali tumpukan dokumen Anda

ChattyBox merayapi dokumentasi Anda yang ada, mengindeks konten untuk diambil, dan menyematkan chatbot yang menjawab menggunakan dokumen Anda, bukan memori model umum.

Buat komponen pesan, sitasi, pemuatan, fallback, dan error kustom.
Simpan ID percakapan dalam state React per pengunjung untuk pertanyaan lanjutan.
Gunakan kunci API publik yang dibatasi origin dengan aman di aplikasi browser.
Hindari mengelola crawler, vector store, layanan retrieval, atau pipeline generation sendiri.
Langkah alur kerja

Instal SDK JavaScript di aplikasi React Anda.

Langkah alur kerja

Buat satu klien Chattybox di luar jalur render komponen.

Langkah alur kerja

Kirim pesan dari event handler dan perbarui state UI dengan responsnya.

Langkah alur kerja

Tampilkan tautan sumber dan tangani kegagalan ChattyboxError terstruktur.

Peluncuran tiga langkah

Tempelkan URL Platform React Anda, uji jawaban yang dikutip, lalu pasang widget.

Buat chatbot React
Integrasi React

Padukan chat berbasis sumber ke sistem komponen Anda

Gunakan pola state, aksesibilitas, styling, dan design system yang sudah dipakai aplikasi Anda, alih-alih menyesuaikan diri dengan kerangka widget tetap.

01

Kendali komponen

Susun pesan, kartu sitasi, prompt, empty state, dan kontrol dari komponen React Anda sendiri.

02

State sesuai kebutuhan Anda

Gunakan state lokal atau lapisan state yang sudah ada sambil menjaga percakapan tetap terpisah antar-pengunjung.

03

Respons yang aksesibel

Kendalikan fokus, live region, perilaku keyboard, dan pengumuman error dalam aplikasi Anda.

04

Backend terkelola

Jaga integrasi browser tetap ringkas sementara ChattyBox menangani pengindeksan konten, retrieval, dan jawaban bersitasi.

Jalur pemasangan

Hubungkan komponen React ke ChattyBox

Buat klien sekali, panggil dari event handler, dan simpan ID percakapan setiap pengunjung dalam state komponen atau aplikasi.

  1. 1Tambahkan @openstaticfish/chattybox ke aplikasi React.
  2. 2Inisialisasi klien dengan environment variable publik dari Vite atau framework Anda.
  3. 3Simpan pesan, sumber, dan ID percakapan yang dikembalikan dalam state per pengunjung.
Buat chatbot 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>;
}
Tanya Jawab

Pertanyaan umum

1

Bisakah saya membuat chatbot React kustom dengan ChattyBox?

Ya. SDK JavaScript mengembalikan pesan, ID percakapan, dan URL sumber sehingga aplikasi React Anda dapat menampilkan antarmuka yang sepenuhnya kustom.

2

Apakah ChattyBox menyediakan komponen React?

SDK sengaja dibuat headless. Dengan demikian, tim dapat menggunakan pustaka komponen, perilaku aksesibilitas, pengelolaan state, dan desain produk mereka sendiri.

3

Di mana sebaiknya saya membuat klien Chattybox di React?

Buat sekali di luar jalur render komponen atau dalam provider aplikasi yang stabil, bukan membuat klien baru pada setiap render.

4

Bisakah saya menggunakan widget yang dihosting di React?

Ya. Gunakan panduan instalasi widget yang dihosting jika Anda menginginkan antarmuka yang dikelola alih-alih rendering React kustom.

Mulai gratis

Tidak perlu kartu kredit. Konten Anda tidak digunakan untuk pelatihan model.

Buat chatbot gratis

Paket gratis. Tanpa kartu.