01
Limite del cliente piccolo
Contrassegna solo il modulo di chat interattiva con use client invece di spostare un'intera pagina o layout nel browser.
Next.jsChatbot SDK
Aggiungi un chatbot AI personalizzato a Piattaforma Next.js
Utilizza @openstaticfish/chattybox all'interno di un limite client mirato mentre il resto della tua applicazione App Router rimane sottoposto a rendering del server. ChattyBox gestisce il recupero, le citazioni, le conversazioni e il ridimensionamento.
Esegue la scansione delle pagine dei documenti pubblicati
Risposte citate dalla fonte
Incorpora con uno script
Non è richiesta la migrazione dei documenti
Nessuna carta di credito richiestaI tuoi contenuti restano tuoi
Chiedi a ChattyBox
xDa dove dovrei iniziare se mi serve una risposta affidabile da questo sito?
Inizia aggiungendo l'URL del tuo sito web a ChattyBox. Scansiona i tuoi contenuti, risponde dalle pagine che trova e mostra ai visitatori le fonti dietro ogni risposta.
iFonti3^
Integrazione Next.js guida
chattybox.ai
Analisi
chattybox.ai
Pagina iniziale
chattybox.ai
Fai una domanda...
Offerto da ChattyBox
Costruito per Next.js App Router squadre
Avvia un chatbot citato alla fonte senza ricostruire lo stack di documenti
ChattyBox esegue la scansione della documentazione esistente, indicizza il contenuto per il recupero e incorpora un chatbot che risponde utilizzando i tuoi documenti anziché la memoria del modello generico.
Mantieni la superficie della chat interattiva entro un piccolo confine use client.
Esponi solo una chiave widget pubblica e limitata all'origine tramite le variabili NEXT_PUBLIC.
Visualizza le risposte citate con il sistema di progettazione Next.js esistente e la shell dell'applicazione.
Continua a eseguire la scansione, il recupero, l'archiviazione dei vettori, la generazione di risposte e il ridimensionamento gestiti da ChattyBox.
Passaggio del workflow
Installa @openstaticfish/chattybox nell'applicazione Next.js.
Passaggio del workflow
Aggiungi la chiave API del widget pubblico e API URL come variabili di ambiente NEXT_PUBLIC.
Passaggio del workflow
Crea un componente client per lo stato della chat e l'interazione con il browser.
Passaggio del workflow
Importa il componente client da una pagina o un layout del componente server.
Lancio in tre fasi
Incolla il tuo URL Integrazione Next.js, prova le risposte citate, quindi installa il widget.
App Router integrazione
Aggiungi interattività senza rinunciare al rendering del server
Mantieni SDK sul lato client dove avviene l'interazione della chat e preserva i componenti server per il resto dell'applicazione.
02
Chiarezza della chiave pubblica
Utilizzare una chiave di progetto sicura per il browser con origini consentite; non esporre mai le credenziali di gestione tramite le variabili NEXT_PUBLIC.
03
Prodotto personalizzato UI
Visualizza messaggi e citazioni nella tua navigazione, nell'area dell'account, nella shell dei documenti o nel flusso di lavoro di supporto.
04
Nessun servizio RAG personalizzato
Evita di aggiungere gestori di route esclusivamente per eseguire il proxy di un browser gestito API a meno che il tuo prodotto non abbia un requisito concreto lato server.
Percorso di installazione
Crea un client di chat Next.js App Router
SDK utilizza fetch e le credenziali del progetto visibili dal browser, quindi inizializzalo in un modulo client. Mantieni i segreti e la gestione API fuori dalle variabili NEXT_PUBLIC.
- 1Installa il pacchetto npm e configura una chiave pubblica limitata all'origine.
- 2Crea un componente use client che possiede lo stato del messaggio e della conversazione.
- 3Esegui il rendering del componente dalla pagina renderizzata dal server senza convertire l'intero percorso in un componente client.
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>;
}Esplora ora
Altri modi per usare ChattyBox
01
SDK per chatbot JavaScript
Esaminare il pacchetto sottostante e i limiti dell'infrastruttura gestita.
Apri
02
SDK per chatbot React
Visualizza i modelli di componenti e stati condivisi dalle applicazioni React.
Apri
03
SDK API riferimento
Esamina i campi di risposta, le conversazioni di follow-up e gli errori.
Apri
04
Widget Next.js ospitato
Utilizza next/script e il widget gestito UI per un'esperienza di chat senza compilazione.
Apri
Domande frequenti
Domande comuni
ChattyBox SDK funziona con Next.js App Router?
SÌ. Usalo in un componente client per lo stato della chat interattiva ed esegui il rendering di quel componente da una pagina o un layout App Router.
Ho bisogno di un gestore di percorso Next.js per ChattyBox?
Non per la normale integrazione del browser. Le chiavi widget pubbliche sono progettate per l'uso da parte dei client e possono essere limitate alle origini approvate.
Le chiavi NEXT_PUBLIC ChattyBox sono segrete?
La chiave widget pubblica identifica un progetto ma non è una credenziale di gestione. Limitalo alla tua produzione e alle origini in anteprima e non esporre mai segreti amministrativi.
Posso utilizzare il widget ChattyBox ospitato con Next.js?
SÌ. La guida all'installazione ospitata mostra il percorso successivo/script quando preferisci un'interfaccia UI mantenuta anziché un'interfaccia SDK personalizzata.
Inizia gratis
Nessuna carta di credito richiesta. I tuoi contenuti non vengono usati per addestrare modelli.
Crea chatbot gratuiti
Piano Free. Nessuna carta.