Lewati ke konten utama
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 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 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 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.

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.
Langkah alur kerja

Instal @openstaticfish/chattybox di aplikasi Next.js.

Langkah alur kerja

Tambahkan kunci API widget publik dan URL API sebagai environment variable NEXT_PUBLIC.

Langkah alur kerja

Buat komponen klien untuk state chat dan interaksi browser.

Langkah 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.

Buat chatbot Next.js
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.

01

Batas klien yang kecil

Tandai hanya modul chat interaktif dengan use client, bukan memindahkan seluruh halaman atau layout ke browser.

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.

  1. 1Instal paket npm dan konfigurasikan kunci publik yang dibatasi origin.
  2. 2Buat komponen use client yang mengelola state pesan dan percakapan.
  3. 3Tampilkan komponen dari halaman yang dirender di server tanpa mengubah seluruh route menjadi komponen klien.
Buat chatbot Next.js
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>;
}
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.