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.
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é zdrojemVloží s jedním skriptemNevyžaduje se migrace dokumentůNení vyžadována kreditní kartaVáš obsah zůstává váš
Zeptejte se ChattyBox
xKde 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 citacemi zdrojů bez přestavby svého webového zásobníku
ChattyBox prochází váš stávající web, dokumentaci, centrum nápovědy, CMS nebo znalostní bázi a poté vloží chatbota, který odpovídá na základě vašeho publikovaného obsahu, nikoli 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.
1Krok pracovního postupu
Nainstalujte @openstaticfish/chattybox do aplikace Next.js.
2Krok pracovního postupu
Přidejte veřejný klíč API widgetu a URL API jako proměnné prostředí NEXT_PUBLIC.
3Krok pracovního postupu
Vytvořte klientskou komponentu pro stav chatu a interakci v prohlížeči.
4Krok 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.
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.
Cesta rozhodnutí
Pomocí těchto kontrolních bodů se můžete rozhodnout, zda má ChattyBox sedět vedle vaší platformy dokumentů, nahradit samostatného asistenta nebo zůstat izolovaný pro testování.
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.
- 1Nainstalujte npm balíček a nastavte veřejný klíč omezený na povolené zdroje.
- 2Vytvořte komponentu use client, která spravuje stav zpráv a konverzace.
- 3Vykreslete komponentu ze stránky renderované na serveru, aniž byste celou route převáděli na klientskou komponentu.
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>;
}Další prozkoumat
Více způsobů, jak používat ChattyBox
01SDK pro chatbot v JavaScriptuProjděte si základní balíček a hranici spravované infrastruktury.02SDK pro chatbot v ReactuProhlédněte si vzory komponent a stavu společné pro aplikace React.03Referenční příručka API SDKProjděte si pole odpovědí, navazující konverzace a chyby.04Hostovaný widget pro Next.jsPro chat bez sestavování použijte next/script a udržované UI widgetu.
Č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.