Přejít na hlavní obsah
SDK pro chatbot v Next.js

Přidejte vlastní AI chatbot do integrace pro Next.js

Použijte @openstaticfish/chattybox uvnitř přesně vymezené klientské hranice, zatímco zbytek aplikace s App Routerem zůstane vykreslovaný na serveru. ChattyBox zajišťuje vyhledávání, citace, konverzace a škálování.

Prochází stránky publikovaných dokumentů
Odpovědi citované zdrojem
Vloží s jedním skriptem
Nevyžaduje se migrace dokumentů
Není vyžadována kreditní kartaVáš obsah zůstává váš
Zeptejte se ChattyBox
x
Kde mám začít, když potřebuji spolehlivou odpověď z tohoto webu?
Začněte přidáním adresy URL svého webu do ChattyBox. Prochází váš obsah, odpovídá ze stránek, které najde, a ukazuje návštěvníkům zdroje za každou odpovědí.
iZdroje3^
Platforma Next.js průvodce
chattybox.ai
Analytika
chattybox.ai
Domov
chattybox.ai
Zeptejte se...
Běží na ChattyBox
Vytvořeno pro Týmy používající Next.js App Router

Spusťte chatbota s citovaným zdrojem, aniž byste museli znovu sestavovat svůj zásobník dokumentů

ChattyBox prochází vaši stávající dokumentaci, indexuje obsah pro vyhledání a vkládá chatbota, který odpovídá pomocí vašich dokumentů namísto obecné paměti modelu.

Udržujte interaktivní chat v malé hranici use client.
Prostřednictvím proměnných NEXT_PUBLIC zpřístupněte pouze veřejný klíč widgetu omezený na povolené zdroje.
Vykreslujte odpovědi s citacemi pomocí svého stávajícího design systému a aplikačního shellu v Next.js.
Procházení, vyhledávání, vektorové úložiště, generování odpovědí a škálování nechte spravovat ChattyBox.
Krok pracovního postupu

Nainstalujte @openstaticfish/chattybox do aplikace Next.js.

Krok pracovního postupu

Přidejte veřejný klíč API widgetu a URL API jako proměnné prostředí NEXT_PUBLIC.

Krok pracovního postupu

Vytvořte klientskou komponentu pro stav chatu a interakci v prohlížeči.

Krok pracovního postupu

Importujte tuto klientskou komponentu ze stránky nebo layoutu typu Server Component.

Spuštění ve třech krocích

Vložte svou adresu URL Platforma Next.js, otestujte citované odpovědi a nainstalujte widget.

Vytvořit chatbot v Next.js
Integrace s App Routerem

Přidejte interaktivitu, aniž byste se vzdali vykreslování na serveru

Ponechte SDK na klientském okraji, kde probíhá interakce s chatem, a pro zbytek aplikace zachovejte Server Components.

01

Malá klientská hranice

Označte pomocí use client pouze interaktivní modul chatu, místo abyste do prohlížeče přesouvali celou stránku nebo layout.

02

Jasné zacházení s veřejným klíčem

Použijte projektový klíč bezpečný pro prohlížeč s povolenými zdroji; přihlašovací údaje pro správu nikdy nezpřístupňujte prostřednictvím proměnných NEXT_PUBLIC.

03

Vlastní produktové UI

Vykreslujte zprávy a citace ve vlastní navigaci, zákaznické sekci, shellu dokumentace nebo pracovním postupu podpory.

04

Bez vlastní služby RAG

Nepřidávejte route handlery pouze kvůli proxy pro spravované API pro prohlížeč, pokud váš produkt nemá konkrétní požadavek na straně serveru.

Instalační cesta

Vytvořte chatovacího klienta pro Next.js App Router

SDK používá fetch a přihlašovací údaje projektu viditelné v prohlížeči, proto ho inicializujte v klientském modulu. Tajné údaje a API pro správu nepatří do proměnných NEXT_PUBLIC.

  1. 1Nainstalujte npm balíček a nastavte veřejný klíč omezený na povolené zdroje.
  2. 2Vytvořte komponentu use client, která spravuje stav zpráv a konverzace.
  3. 3Vykreslete komponentu ze stránky renderované na serveru, aniž byste celou route převáděli na klientskou komponentu.
Vytvořit chatbot v Next.js
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>;
}
Časté dotazy

Běžné otázky

1

Funguje ChattyBox SDK s Next.js App Routerem?

Ano. Použijte ho v klientské komponentě pro interaktivní stav chatu a tuto komponentu vykreslete ze stránky nebo layoutu App Routeru.

2

Potřebuji pro ChattyBox route handler v Next.js?

Pro běžnou integraci v prohlížeči ne. Veřejné klíče widgetu jsou určené pro použití na klientovi a lze je omezit na schválené zdroje.

3

Jsou klíče ChattyBox v NEXT_PUBLIC tajné?

Veřejný klíč widgetu identifikuje projekt, ale nejde o přihlašovací údaj pro správu. Omezte ho na produkční a preview zdroje a nikdy nezveřejňujte administrativní tajné údaje.

4

Mohu s Next.js použít hostovaný widget ChattyBox?

Ano. Pokud dáváte přednost udržovanému UI před vlastním rozhraním SDK, průvodce hostovanou instalací ukazuje postup s next/script.

Začněte zdarma

Není vyžadována kreditní karta. Váš obsah se nepoužívá k trénování modelů.

Vytvořte si chatbota zdarma

Tarif Free. Bez karty.