SDK voor Next.js-chatbots

Voeg een aangepaste AI-chatbot toe Next.js-platform

Gebruik @openstaticfish/chattybox binnen een gerichte clientgrens, terwijl de rest van uw App Router-applicatie door de server wordt weergegeven. ChattyBox zorgt voor het ophalen, citaten, gesprekken en schalen.

Crawlt gepubliceerde documentpagina's

Bronvermelde antwoorden

Ingesloten met één script

Geen documentmigratie vereist

Bouw een Next.js chatbot Lees de SDK-referentie

Geen creditcard vereistJe content blijft van jou

Vraag ChattyBox

Waar moet ik beginnen als ik een betrouwbaar antwoord van deze site nodig heb?

Begin door uw website-URL aan ChattyBox toe te voegen. Het crawlt uw content, beantwoordt vragen vanuit de pagina's die het vindt en toont bezoekers de bronnen achter elk antwoord.

iBronnen3^

Next.js-integratie gids

chattybox.ai

Analyse

chattybox.ai

Startpagina

chattybox.ai

Stel een vraag...

Aangedreven door ChattyBox

Gebouwd voor Teams die Next.js App Router gebruiken

Lanceer een chatbot met bronvermeldingen zonder je documentatiestack opnieuw te bouwen

ChattyBox crawlt je bestaande documentatie, indexeert de content voor retrieval en embedt een chatbot die antwoordt vanuit je documentatie in plaats van generiek modelgeheugen.

Houd het interactieve chatoppervlak binnen een kleine use client-grens.

Maak alleen een openbare widgetsleutel met een beperkte oorsprong zichtbaar via NEXT_PUBLIC-variabelen.

Geef de geciteerde antwoorden weer met uw bestaande Next.js ontwerpsysteem en applicatieshell.

Blijf crawlen, ophalen, vectoropslag, het genereren van antwoorden en schalen beheerd door ChattyBox.

Workflowstap

Installeer @openstaticfish/chattybox in de Next.js-applicatie.

Workflowstap

Voeg de openbare widget API sleutel en API URL toe als NEXT_PUBLIC omgevingsvariabelen.

Workflowstap

Maak een clientcomponent voor chatstatus en browserinteractie.

Workflowstap

Importeer die clientcomponent van een servercomponentpagina of lay-out.

Lancering in drie stappen

Plak uw Next.js-integratie URL, test de geciteerde antwoorden en installeer vervolgens de widget.

Bouw een Next.js chatbot

App Router-integratie

Voeg interactiviteit toe zonder de serverweergave op te geven

Bewaar de SDK aan de rand van de client waar chatinteractie plaatsvindt en bewaar servercomponenten voor de rest van de applicatie.

Beslissingspad

Gebruik deze controlepunten om te beslissen of ChattyBox naast uw documentplatform moet worden geplaatst, een afzonderlijke assistent moet vervangen of geïsoleerd moet blijven om te testen.

Kleine cliëntgrens

Markeer alleen de interactieve chatmodule met use client in plaats van een hele pagina of lay-out naar de browser te verplaatsen.

Duidelijkheid van de openbare sleutel

Gebruik een browserveilige projectsleutel met toegestane oorsprong; Stel nooit beheerreferenties bloot via NEXT_PUBLIC-variabelen.

Aangepast product UI

Geef berichten en citaten weer in uw eigen navigatie, accountgebied, documentenshell of ondersteun de workflow.

Geen aangepaste RAG-service

Vermijd het toevoegen van route-handlers uitsluitend om een beheerde browser API te proxyen, tenzij uw product een concrete server-side vereiste heeft.

Installatiepad

Maak een Next.js App Router chatclient

De SDK gebruikt fetch en in de browser zichtbare projectreferenties, dus initialiseer deze in een clientmodule. Houd geheimen en beheer APIs uit NEXT_PUBLIC variabelen.

1Installeer het npm-pakket en configureer een op oorsprong beperkte openbare sleutel.
2Maak een use client-component die eigenaar is van de bericht- en gespreksstatus.
3Geef de component weer vanaf uw door de server weergegeven pagina zonder de hele route naar een clientcomponent te converteren.

Bouw een 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>;
}

Hierna verkennen

Meer manieren om ChattyBox te gebruiken

Platformgidsen bekijken

SDK voor JavaScript-chatbots

Controleer het onderliggende pakket en de grens van de beheerde infrastructuur.

Openen

SDK voor React-chatbots

Bekijk component- en statuspatronen die worden gedeeld door React-applicaties.

Openen

SDK API referentie

Controleer antwoordvelden, vervolggesprekken en fouten.

Openen

Gehoste Next.js-widget

Gebruik next/script en de onderhouden widget UI voor een no-build chatervaring.

Openen

Veelgestelde vragen

Werkt de ChattyBox SDK met de Next.js App Router?

Ja. Gebruik het in een clientcomponent voor een interactieve chatstatus en geef die component weer vanaf een App Router pagina of lay-out.

Heb ik een Next.js route-handler nodig voor ChattyBox?

Niet voor de normale browserintegratie. Openbare widgetsleutels zijn ontworpen voor gebruik door klanten en kunnen worden beperkt tot goedgekeurde oorsprongen.

Zijn NEXT_PUBLIC ChattyBox sleutels geheim?

De openbare widgetsleutel identificeert een project, maar is geen managementreferentie. Beperk het tot uw productie- en preview-oorsprong en geef nooit administratieve geheimen prijs.

Kan ik de gehoste ChattyBox-widget gebruiken met Next.js?

Ja. De gehoste installatiehandleiding toont het next/script-pad als u de voorkeur geeft aan een onderhouden UI in plaats van een aangepaste SDK-interface.

Gratis starten

Geen creditcard vereist. Je content wordt niet gebruikt voor modeltraining.

Maak een gratis chatbot

Gratis niveau. Geen kaart nodig.