01
Liten klientgräns
Markera endast den interaktiva chattmodulen med `use client` i stället för att flytta en hel sida eller layout till webbläsaren.
Next.js-SDK för chattbotar
Lägg till en anpassad AI-chatbot till Next.js-integration
Använd @openstaticfish/chattybox inom en fokuserad klientgräns medan resten av din App Router-applikation förblir serverrenderad. ChattyBox hanterar hämtning, citat, konversationer och skalning.
Genomsöker publicerade dokumentsidorKällangivna svarBäddar in med ett skriptIngen dokumentmigrering krävsInget kreditkort krävsDitt innehåll förblir ditt
Fråga ChattyBox
xVar ska jag börja om jag behöver ett tillförlitligt svar från den här webbplatsen?
Börja med att lägga till din webbplats-URL i ChattyBox. Den genomsöker ditt innehåll, svarar utifrån sidorna den hittar och visar besökare källorna bakom varje svar.
iKällor3^
Next.js-plattform vägledning
chattybox.ai
Analys
chattybox.ai
Hem
chattybox.ai
Ställ en fråga...
Drivs av ChattyBox
Byggd för Next.js App Router-team
Lansera en chatbot med källhänvisningar utan att bygga om webbplatsens stack
ChattyBox genomsöker din befintliga webbplats, dokumentation, hjälpcenter, CMS eller kunskapsbas och bäddar sedan in en chatbot som svarar utifrån ditt eget publicerade innehåll i stället för modellens generiska minne.
Håll den interaktiva chattytan inom en liten `use client`-gräns.
Visa endast en offentlig, ursprungsbegränsad widgetnyckel genom NEXT_PUBLIC-variabler.
Återge citerade svar med ditt befintliga Next.js-designsystem och applikationsskal.
Fortsätt genomsökning, hämtning, vektorlagring, svarsgenerering och skalning som hanteras av ChattyBox.
1Arbetsflödessteg
Installera @openstaticfish/chattybox i Next.js-applikationen.
2Arbetsflödessteg
Lägg till den offentliga widgetens API-nyckel och API-URL som NEXT_PUBLIC miljövariabler.
3Arbetsflödessteg
Skapa en klientkomponent för chattstatus och webbläsarinteraktion.
4Arbetsflödessteg
Importera den klientkomponenten från en serverkomponentsida eller layout.
Lansering i tre steg
Klistra in din Next.js-plattform URL, testa citerade svar och installera sedan widgeten.
App Router-integration
Lägg till interaktivitet utan att ge upp serverrenderingen
Håll SDK vid klientkanten där chattinteraktion sker och bevara serverkomponenter för resten av programmet.
Beslutsväg
Använd dessa kontrollpunkter för att bestämma om ChattyBox ska sitta bredvid din dokumentplattform, ersätta en separat assistent eller hålla sig isolerad för testning.
02
Tydlighet i den offentliga nyckeln
Använd en webbläsarsäker projektnyckel med tillåtna ursprung; exponera aldrig hanteringsuppgifter via NEXT_PUBLIC-variabler.
03
Anpassad produktgränssnitt
Återge meddelanden och citat i din egen navigering, kontoområde, dokumentskal eller supportarbetsflöde.
04
Ingen anpassad RAG-tjänst
Undvik att lägga till rutthanterare enbart för att proxyservera ett hanterat webbläsar-API om inte din produkt har ett konkret krav på serversidan.
Installationsväg
Skapa en Next.js App Router-chattklient
SDK:n använder hämtning och webbläsarsynliga projektuppgifter, så initiera det i en klientmodul. Håll hemligheter och hanterings-API:er borta från NEXT_PUBLIC-variabler.
- 1Installera npm-paketet och konfigurera en ursprungsbegränsad offentlig nyckel.
- 2Skapa en `use client`-komponent som hanterar meddelande- och konversationsstatus.
- 3Rendera komponenten från din serverrenderade sida utan att konvertera hela rutten till en klientkomponent.
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>;
}Utforska härnäst
Fler sätt att använda ChattyBox
01JavaScript-SDK för chattbotarGranska det underliggande paketet och gränsen för hanterad infrastruktur.02Reager chatbot SDKSe komponent- och tillståndsmönster som delas av React-applikationer.03SDK API-referensGranska svarsfält, uppföljningskonversationer och fel.04Hosted Next.js-widgetAnvänd nästa/skript och det underhållna widget-gränssnittet för en chattupplevelse utan att byggas.
Vanliga frågor
Vanliga frågor
1
Fungerar ChattyBox SDK med Next.js App Router?
Ja. Använd den i en klientkomponent för interaktivt chattläge och rendera den komponenten från en App Router-sida eller layout.
2
Behöver jag en Next.js-rutthanterare för ChattyBox?
Inte för normal webbläsarintegration. Offentliga widgetnycklar är designade för klientanvändning och kan begränsas till godkända ursprung.
3
Är NEXT_PUBLIC ChattyBox-nycklar hemligheter?
Den offentliga widgetnyckeln identifierar ett projekt men är inte en hanteringsuppgifter. Begränsa det till din produktion och förhandsgranskning, och avslöja aldrig administrativa hemligheter.
4
Kan jag använda den värdbaserade ChattyBox-widgeten med Next.js?
Ja. Den värdbaserade installationsguiden visar nästa/skriptsökväg när du föredrar ett underhållet gränssnitt istället för ett anpassat SDK-gränssnitt.
Starta gratis
Inget kreditkort krävs. Ditt innehåll används inte för modellträning.
Skapa gratis chatbot
Free-nivå. Inget kort behövs.