Kendali komponen
Susun pesan, kartu sitasi, prompt, empty state, dan kontrol dari komponen React Anda sendiri.
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.
ChattyBox merayapi dokumentasi Anda yang ada, mengindeks konten untuk diambil, dan menyematkan chatbot yang menjawab menggunakan dokumen Anda, bukan memori model umum.
Instal SDK JavaScript di aplikasi React Anda.
Buat satu klien Chattybox di luar jalur render komponen.
Kirim pesan dari event handler dan perbarui state UI dengan responsnya.
Tampilkan tautan sumber dan tangani kegagalan ChattyboxError terstruktur.
Peluncuran tiga langkah
Gunakan pola state, aksesibilitas, styling, dan design system yang sudah dipakai aplikasi Anda, alih-alih menyesuaikan diri dengan kerangka widget tetap.
Susun pesan, kartu sitasi, prompt, empty state, dan kontrol dari komponen React Anda sendiri.
Gunakan state lokal atau lapisan state yang sudah ada sambil menjaga percakapan tetap terpisah antar-pengunjung.
Kendalikan fokus, live region, perilaku keyboard, dan pengumuman error dalam aplikasi Anda.
Jaga integrasi browser tetap ringkas sementara ChattyBox menangani pengindeksan konten, retrieval, dan jawaban bersitasi.
Buat klien sekali, panggil dari event handler, dan simpan ID percakapan setiap pengunjung dalam state komponen atau aplikasi.
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>;
}Pahami klien dasar, model respons, dan batas tanggung jawab infrastruktur.
Terapkan klien React dalam batas klien App Router.
Pelajari kelanjutan percakapan dan penanganan error terstruktur.
Gunakan UI berbasis skrip yang dikelola alih-alih membuat komponen kustom.
Ya. SDK JavaScript mengembalikan pesan, ID percakapan, dan URL sumber sehingga aplikasi React Anda dapat menampilkan antarmuka yang sepenuhnya kustom.
SDK sengaja dibuat headless. Dengan demikian, tim dapat menggunakan pustaka komponen, perilaku aksesibilitas, pengelolaan state, dan desain produk mereka sendiri.
Buat sekali di luar jalur render komponen atau dalam provider aplikasi yang stabil, bukan membuat klien baru pada setiap render.
Ya. Gunakan panduan instalasi widget yang dihosting jika Anda menginginkan antarmuka yang dikelola alih-alih rendering React kustom.
Tidak perlu kartu kredit. Konten Anda tidak digunakan untuk pelatihan model.
Paket gratis. Tanpa kartu.