01
Kleine Client-Grenze
Markieren Sie nur das interaktive Chatmodul mit use client, statt eine ganze Seite oder ein Layout in den Browser zu verlagern.
Next.js-Chatbot-SDK
Fügen Sie einen eigenen KI-Chatbot zu Ihrer Next.js-Anwendung
Nutzen Sie @openstaticfish/chattybox in einer gezielten Client-Grenze, während der Rest Ihrer App-Router-Anwendung serverseitig gerendert bleibt. ChattyBox übernimmt Suche, Quellenangaben, Konversationen und Skalierung.
Crawlt veröffentlichte Dokumentseiten
Quellenzitierte Antworten
Einbettung mit einem Skript
Keine Dokumentenmigration erforderlich
Keine Kreditkarte erforderlichIhre Inhalte bleiben Ihre Inhalte
ChattyBox fragen
xWo sollte ich anfangen, wenn ich eine verlässliche Antwort von dieser Website brauche?
Fügen Sie zunächst Ihre Website-URL zu ChattyBox hinzu. Es crawlt Ihre Inhalte, beantwortet Fragen anhand der gefundenen Seiten und zeigt Besuchern die Quellen hinter jeder Antwort.
iQuellen3^
Next.js-Integration Leitfaden
chattybox.ai
Analysen
chattybox.ai
Startseite
chattybox.ai
Eine Frage stellen...
Bereitgestellt von ChattyBox
Entwickelt für Next.js-App-Router-Teams
Starten Sie einen Chatbot mit Quellenangaben, ohne Ihren Docs-Stack neu aufzubauen
ChattyBox crawlt Ihre bestehende Dokumentation, indexiert die Inhalte für den Abruf und bettet einen Chatbot ein, der mit Ihren Docs antwortet statt mit generischem Modellgedächtnis.
Halten Sie die interaktive Chat-Oberfläche in einer kleinen use client-Grenze.
Stellen Sie über NEXT_PUBLIC-Variablen nur einen öffentlichen, ursprungsbeschränkten Widget-Schlüssel bereit.
Zeigen Sie Antworten mit Quellenangaben in Ihrem vorhandenen Next.js-Designsystem und Ihrer Anwendungshülle an.
Lassen Sie ChattyBox Crawling, Suche, Vektorspeicherung, Antwortgenerierung und Skalierung verwalten.
Workflow-Schritt
Installieren Sie @openstaticfish/chattybox in der Next.js-Anwendung.
Workflow-Schritt
Fügen Sie den öffentlichen Widget-API-Schlüssel und die API-URL als NEXT_PUBLIC-Umgebungsvariablen hinzu.
Workflow-Schritt
Erstellen Sie eine Client-Komponente für Chatstatus und Browser-Interaktion.
Workflow-Schritt
Importieren Sie diese Client-Komponente aus einer Server-Component-Seite oder einem Layout.
Dreistufiger Start
Fügen Sie Ihre Next.js-Integration-URL ein, testen Sie die zitierten Antworten und installieren Sie dann das Widget.
App-Router-Integration
Interaktivität ohne Verzicht auf Server-Rendering
Halten Sie das SDK an der Client-Grenze der Chatinteraktion und bewahren Sie Server Components für den Rest der Anwendung.
02
Klare öffentliche Schlüssel
Nutzen Sie einen browsersicheren Projektschlüssel mit erlaubten Ursprüngen; legen Sie Verwaltungszugänge nie über NEXT_PUBLIC-Variablen offen.
03
Eigene Produktoberfläche
Zeigen Sie Nachrichten und Quellenangaben in Navigation, Kontobereich, Dokumentationshülle oder Supportworkflow an.
04
Kein eigener RAG-Dienst
Fügen Sie keine Route Handler nur als Proxy für eine verwaltete Browser-API hinzu, sofern kein konkreter serverseitiger Bedarf besteht.
Installationspfad
Chat-Client für den Next.js App Router erstellen
Das SDK verwendet fetch und im Browser sichtbare Projektzugänge. Initialisieren Sie es daher in einem Client-Modul. Secrets und Verwaltungs-APIs gehören nicht in NEXT_PUBLIC-Variablen.
- 1Installieren Sie das npm-Paket und konfigurieren Sie einen ursprungsbeschränkten öffentlichen Schlüssel.
- 2Erstellen Sie eine use client-Komponente, die Nachrichten- und Konversationsstatus verwaltet.
- 3Rendern Sie die Komponente aus Ihrer serverseitig gerenderten Seite, ohne die gesamte Route in eine Client-Komponente umzuwandeln.
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>;
}Als Nächstes ansehen
Weitere Möglichkeiten, ChattyBox zu nutzen
01
JavaScript-Chatbot-SDK
Informieren Sie sich über das zugrunde liegende Paket und die Grenze der verwalteten Infrastruktur.
Öffnen
02
React-Chatbot-SDK
Sehen Sie Komponenten- und Statusmuster, die React-Anwendungen gemeinsam haben.
Öffnen
03
SDK-API-Referenz
Informieren Sie sich über Antwortfelder, Folgegespräche und Fehler.
Öffnen
04
Gehostetes Next.js-Widget
Nutzen Sie next/script und die gepflegte Widget-Oberfläche für ein Chat-Erlebnis ohne Build-Schritt.
Öffnen
Häufige Fragen
Häufige Fragen
Funktioniert das ChattyBox-SDK mit dem Next.js App Router?
Ja. Nutzen Sie es in einer Client-Komponente für interaktiven Chatstatus und rendern Sie diese aus einer App-Router-Seite oder einem Layout.
Benötige ich einen Next.js Route Handler für ChattyBox?
Nicht für die normale Browser-Integration. Öffentliche Widget-Schlüssel sind für die Client-Nutzung gedacht und lassen sich auf erlaubte Ursprünge beschränken.
Sind NEXT_PUBLIC-Schlüssel von ChattyBox Secrets?
Der öffentliche Widget-Schlüssel identifiziert ein Projekt, ist aber kein Verwaltungszugang. Beschränken Sie ihn auf Produktions- und Vorschau-Ursprünge und legen Sie nie administrative Secrets offen.
Kann ich das gehostete ChattyBox-Widget mit Next.js verwenden?
Ja. Die gehostete Installationsanleitung zeigt den Weg mit next/script, wenn Sie eine gepflegte Oberfläche statt einer eigenen SDK-Oberfläche bevorzugen.
Kostenlos starten
Keine Kreditkarte erforderlich. Ihre Inhalte werden nicht für Modelltraining verwendet.
Erstellen Sie einen kostenlosen Chatbot
Kostenloser Tarif. Keine Karte nötig.