01
Batas klien yang kecil
Tandai hanya modul chat interaktif dengan use client, bukan memindahkan seluruh halaman atau layout ke browser.
SDK Chatbot Next.js
Tambahkan chatbot AI kustom ke Integrasi Next.js
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.
Merangkak halaman dokumen yang dipublikasikanJawaban yang dikutip dari sumberSematkan dengan satu skripTidak diperlukan migrasi dokumenTidak perlu kartu kreditKonten Anda tetap milik Anda
Tanya ChattyBox
xDi 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 Next.js panduan
chattybox.ai
Analitik
chattybox.ai
Beranda
chattybox.ai
Ajukan pertanyaan...
Didukung oleh ChattyBox
Dibuat untuk Tim Next.js App Router
Luncurkan chatbot dengan kutipan sumber tanpa membangun ulang stack situs Anda
ChattyBox merayapi situs web, dokumentasi, pusat bantuan, CMS, atau basis pengetahuan yang sudah ada, lalu menyematkan chatbot yang menjawab berdasarkan konten terbitan Anda sendiri, bukan memori model generik.
Pertahankan permukaan chat interaktif dalam batas use client yang kecil.
Ekspos hanya kunci widget publik yang dibatasi origin melalui variabel NEXT_PUBLIC.
Tampilkan jawaban bersitasi dengan design system Next.js dan shell aplikasi Anda.
Biarkan crawling, retrieval, penyimpanan vektor, pembuatan jawaban, dan penskalaan dikelola ChattyBox.
1Langkah alur kerja
Instal @openstaticfish/chattybox di aplikasi Next.js.
2Langkah alur kerja
Tambahkan kunci API widget publik dan URL API sebagai environment variable NEXT_PUBLIC.
3Langkah alur kerja
Buat komponen klien untuk state chat dan interaksi browser.
4Langkah alur kerja
Impor komponen klien tersebut dari halaman atau layout Server Component.
Peluncuran tiga langkah
Tempelkan URL Platform Next.js Anda, uji jawaban yang dikutip, lalu pasang widget.
Integrasi App Router
Tambahkan interaktivitas tanpa mengorbankan rendering server
Pertahankan SDK di sisi klien tempat interaksi chat berlangsung dan gunakan Server Components untuk bagian aplikasi lainnya.
Jalur keputusan
Gunakan pos pemeriksaan ini untuk memutuskan apakah ChattyBox harus ditempatkan di samping platform dokumen Anda, menggantikan asisten terpisah, atau tetap terisolasi untuk pengujian.
02
Kejelasan kunci publik
Gunakan kunci proyek yang aman untuk browser dengan origin yang diizinkan; jangan pernah mengekspos kredensial pengelolaan melalui variabel NEXT_PUBLIC.
03
UI produk kustom
Tampilkan pesan dan sitasi dalam navigasi, area akun, shell dokumentasi, atau alur support Anda sendiri.
04
Tanpa layanan RAG kustom
Hindari menambahkan route handler hanya untuk mem-proxy API browser terkelola, kecuali produk Anda memiliki kebutuhan server-side yang konkret.
Jalur pemasangan
Buat klien chat Next.js App Router
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.
- 1Instal paket npm dan konfigurasikan kunci publik yang dibatasi origin.
- 2Buat komponen use client yang mengelola state pesan dan percakapan.
- 3Tampilkan komponen dari halaman yang dirender di server tanpa mengubah seluruh route menjadi komponen klien.
app/components/chat.tsx
tsx
'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>;
}Jelajahi berikutnya
Lebih banyak cara menggunakan ChattyBox
01SDK chatbot JavaScriptPelajari paket dasar dan batas tanggung jawab infrastruktur terkelola.02SDK chatbot ReactLihat pola komponen dan state yang digunakan bersama oleh aplikasi React.03Referensi API SDKPelajari field respons, percakapan lanjutan, dan error.04Widget Next.js yang dihostingGunakan next/script dan UI widget yang dikelola untuk pengalaman chat tanpa proses build.
Tanya Jawab
Pertanyaan umum
1
Apakah SDK ChattyBox berfungsi dengan Next.js App Router?
Ya. Gunakan dalam komponen klien untuk state chat interaktif dan tampilkan komponen tersebut dari halaman atau layout App Router.
2
Apakah saya memerlukan route handler Next.js untuk ChattyBox?
Tidak untuk integrasi browser normal. Kunci widget publik dirancang untuk penggunaan klien dan dapat dibatasi ke origin yang disetujui.
3
Apakah kunci NEXT_PUBLIC ChattyBox merupakan secret?
Kunci widget publik mengidentifikasi proyek, tetapi bukan kredensial pengelolaan. Batasi ke origin production dan preview Anda, dan jangan pernah mengekspos secret administratif.
4
Bisakah saya menggunakan widget ChattyBox yang dihosting dengan Next.js?
Ya. Panduan instalasi yang dihosting menunjukkan jalur next/script jika Anda memilih UI yang dikelola alih-alih antarmuka SDK kustom.
Mulai gratis
Tidak perlu kartu kredit. Konten Anda tidak digunakan untuk pelatihan model.
Buat chatbot gratis
Paket gratis. Tanpa kartu.