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 pubblicatiRisposte citate dalla fonteIncorpora con uno scriptNon è richiesta la migrazione dei documentiNessuna 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 pubblico del sito a ChattyBox. Recupera contenuti indicizzati per guidare le risposte e può mostrare link alle pagine fonte da verificare. Prova risposte e fallback prima del lancio.
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
Lancia un chatbot con citazioni delle fonti senza ricostruire lo stack del tuo sito
ChattyBox esegue la scansione del tuo sito web esistente, della documentazione, del centro assistenza, del CMS o della knowledge base, quindi incorpora un chatbot che risponde dai tuoi contenuti pubblicati invece che dalla memoria generica del modello.
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.
1Passaggio del workflow
Installa @openstaticfish/chattybox nell'applicazione Next.js.
2Passaggio del workflow
Aggiungi la chiave API del widget pubblico e API URL come variabili di ambiente NEXT_PUBLIC.
3Passaggio del workflow
Crea un componente client per lo stato della chat e l'interazione con il browser.
4Passaggio 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.
Percorso decisionale
Utilizza questi punti di controllo per decidere se ChattyBox deve essere affiancato alla tua piattaforma di documenti, sostituire un assistente separato o rimanere isolato per i test.
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
01SDK per chatbot JavaScriptEsaminare il pacchetto sottostante e i limiti dell'infrastruttura gestita.02SDK per chatbot ReactVisualizza i modelli di componenti e stati condivisi dalle applicazioni React.03SDK API riferimentoEsamina i campi di risposta, le conversazioni di follow-up e gli errori.04Widget Next.js ospitatoUtilizza next/script e il widget gestito UI per un'esperienza di chat senza compilazione.
Domande frequenti
Domande comuni
1
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.
2
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.
3
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.
4
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.