Batas klien yang kecil
Tandai hanya modul chat interaktif dengan use client, bukan memindahkan seluruh halaman atau layout ke browser.
Gunakan @openstaticfish/chattybox dalam batas klien yang terfokus, sementara bagian lain aplikasi App Router tetap dirender di server. ChattyBox menangani retrieval, sitasi, percakapan, dan penskalaan.
ChattyBox merayapi dokumentasi Anda yang ada, mengindeks konten untuk diambil, dan menyematkan chatbot yang menjawab menggunakan dokumen Anda, bukan memori model umum.
Instal @openstaticfish/chattybox di aplikasi Next.js.
Tambahkan kunci API widget publik dan URL API sebagai environment variable NEXT_PUBLIC.
Buat komponen klien untuk state chat dan interaksi browser.
Impor komponen klien tersebut dari halaman atau layout Server Component.
Peluncuran tiga langkah
Pertahankan SDK di sisi klien tempat interaksi chat berlangsung dan gunakan Server Components untuk bagian aplikasi lainnya.
Tandai hanya modul chat interaktif dengan use client, bukan memindahkan seluruh halaman atau layout ke browser.
Gunakan kunci proyek yang aman untuk browser dengan origin yang diizinkan; jangan pernah mengekspos kredensial pengelolaan melalui variabel NEXT_PUBLIC.
Tampilkan pesan dan sitasi dalam navigasi, area akun, shell dokumentasi, atau alur support Anda sendiri.
Hindari menambahkan route handler hanya untuk mem-proxy API browser terkelola, kecuali produk Anda memiliki kebutuhan server-side yang konkret.
SDK menggunakan fetch dan kredensial proyek yang terlihat di browser, jadi inisialisasikan dalam modul klien. Jangan masukkan secret dan API pengelolaan ke variabel NEXT_PUBLIC.
'use client';
import { useState } from 'react';
import { Chattybox } from '@openstaticfish/chattybox';
const chattybox = new Chattybox({
apiKey: process.env.NEXT_PUBLIC_CHATTYBOX_API_KEY!,
baseUrl: process.env.NEXT_PUBLIC_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>;
}Pelajari paket dasar dan batas tanggung jawab infrastruktur terkelola.
Lihat pola komponen dan state yang digunakan bersama oleh aplikasi React.
Pelajari field respons, percakapan lanjutan, dan error.
Gunakan next/script dan UI widget yang dikelola untuk pengalaman chat tanpa proses build.
Ya. Gunakan dalam komponen klien untuk state chat interaktif dan tampilkan komponen tersebut dari halaman atau layout App Router.
Tidak untuk integrasi browser normal. Kunci widget publik dirancang untuk penggunaan klien dan dapat dibatasi ke origin yang disetujui.
Kunci widget publik mengidentifikasi proyek, tetapi bukan kredensial pengelolaan. Batasi ke origin production dan preview Anda, dan jangan pernah mengekspos secret administratif.
Ya. Panduan instalasi yang dihosting menunjukkan jalur next/script jika Anda memilih UI yang dikelola alih-alih antarmuka SDK kustom.
Tidak perlu kartu kredit. Konten Anda tidak digunakan untuk pelatihan model.
Paket gratis. Tanpa kartu.