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.
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í.
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.
Nainstalujte @openstaticfish/chattybox do aplikace Next.js.
Přidejte veřejný klíč API widgetu a URL API jako proměnné prostředí NEXT_PUBLIC.
Vytvořte klientskou komponentu pro stav chatu a interakci v prohlížeči.
Importujte tuto klientskou komponentu ze stránky nebo layoutu typu Server Component.
Spuštění ve třech krocích
Ponechte SDK na klientském okraji, kde probíhá interakce s chatem, a pro zbytek aplikace zachovejte Server Components.
Označte pomocí use client pouze interaktivní modul chatu, místo abyste do prohlížeče přesouvali celou stránku nebo layout.
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.
Vykreslujte zprávy a citace ve vlastní navigaci, zákaznické sekci, shellu dokumentace nebo pracovním postupu podpory.
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.
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.
'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>;
}Projděte si základní balíček a hranici spravované infrastruktury.
Prohlédněte si vzory komponent a stavu společné pro aplikace React.
Projděte si pole odpovědí, navazující konverzace a chyby.
Pro chat bez sestavování použijte next/script a udržované UI widgetu.
Ano. Použijte ho v klientské komponentě pro interaktivní stav chatu a tuto komponentu vykreslete ze stránky nebo layoutu App Routeru.
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.
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.
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.
Není vyžadována kreditní karta. Váš obsah se nepoužívá k trénování modelů.
Tarif Free. Bez karty.