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.
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.
ChattyBox crawlar din befintliga dokumentation, indexerar innehållet för hämtning och bäddar in en chattbot som svarar med dina docs i stället för generiskt modellminne.
Installera @openstaticfish/chattybox i Next.js-applikationen.
Lägg till den offentliga widgetens API-nyckel och API-URL som NEXT_PUBLIC miljövariabler.
Skapa en klientkomponent för chattstatus och webbläsarinteraktion.
Importera den klientkomponenten från en serverkomponentsida eller layout.
Lansering i tre steg
Håll SDK vid klientkanten där chattinteraktion sker och bevara serverkomponenter för resten av programmet.
Markera endast den interaktiva chattmodulen med `use client` i stället för att flytta en hel sida eller layout till webbläsaren.
Använd en webbläsarsäker projektnyckel med tillåtna ursprung; exponera aldrig hanteringsuppgifter via NEXT_PUBLIC-variabler.
Återge meddelanden och citat i din egen navigering, kontoområde, dokumentskal eller supportarbetsflöde.
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.
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.
'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>;
}Granska det underliggande paketet och gränsen för hanterad infrastruktur.
Se komponent- och tillståndsmönster som delas av React-applikationer.
Granska svarsfält, uppföljningskonversationer och fel.
Använd nästa/skript och det underhållna widget-gränssnittet för en chattupplevelse utan att byggas.
Ja. Använd den i en klientkomponent för interaktivt chattläge och rendera den komponenten från en App Router-sida eller layout.
Inte för normal webbläsarintegration. Offentliga widgetnycklar är designade för klientanvändning och kan begränsas till godkända ursprung.
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.
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.
Inget kreditkort krävs. Ditt innehåll används inte för modellträning.
Free-nivå. Inget kort behövs.