Hoppa till huvudinnehållet
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 dokumentsidor
Källangivna svar
Bäddar in med ett skript
Ingen dokumentmigrering krävs
Inget kreditkort krävsDitt innehåll förblir ditt
Fråga ChattyBox
x
Var 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 chattbot med källhänvisningar utan att bygga om din docs-stack

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.

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.
Arbetsflödessteg

Installera @openstaticfish/chattybox i Next.js-applikationen.

Arbetsflödessteg

Lägg till den offentliga widgetens API-nyckel och API-URL som NEXT_PUBLIC miljövariabler.

Arbetsflödessteg

Skapa en klientkomponent för chattstatus och webbläsarinteraktion.

Arbetsflö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.

Bygg en Next.js chatbot
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.

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.

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.

  1. 1Installera npm-paketet och konfigurera en ursprungsbegränsad offentlig nyckel.
  2. 2Skapa en `use client`-komponent som hanterar meddelande- och konversationsstatus.
  3. 3Rendera komponenten från din serverrenderade sida utan att konvertera hela rutten till en klientkomponent.
Bygg en Next.js chatbot
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>;
}
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.