Pieni asiakasrajapinta
Merkitse use client -direktiivillä vain interaktiivinen chat-moduuli koko sivun tai asettelun siirtämisen sijaan selaimeen.
Käytä @openstaticfish/chattybox-pakettia rajatussa asiakasrajapinnassa, kun muu App Router -sovellus säilyy palvelinrenderöitynä. ChattyBox hoitaa tiedonhaun, lähdeviitteet, keskustelut ja skaalauksen.
ChattyBox indeksoi olemassa olevan dokumentaatiosi, indeksoi sisällön haettavaksi ja upottaa chatbotin, joka vastaa käyttämällä asiakirjojasi yleisen mallimuistin sijaan.
Asenna @openstaticfish/chattybox Next.js-sovellukseen.
Lisää julkinen widgetin API-avain ja API-URL-osoite NEXT_PUBLIC-ympäristömuuttujina.
Luo asiakaskomponentti chatin tilalle ja selainvuorovaikutukselle.
Tuo asiakaskomponentti palvelinkomponenttina toimivalle sivulle tai asetteluun.
Kolmivaiheinen käynnistys
Pidä SDK asiakasrajalla, jossa chat-vuorovaikutus tapahtuu, ja säilytä palvelinkomponentit muualla sovelluksessa.
Merkitse use client -direktiivillä vain interaktiivinen chat-moduuli koko sivun tai asettelun siirtämisen sijaan selaimeen.
Käytä selaimessa turvallista projektiavainta sallituilla origineilla; älä koskaan paljasta hallintatunnuksia NEXT_PUBLIC-muuttujissa.
Esitä viestit ja lähdeviitteet omassa navigaatiossasi, käyttäjäalueellasi, dokumentaatiokuoressasi tai tukityönkulussasi.
Älä lisää route handlereita vain hallitun selain-API:n välityspalvelimeksi, ellei tuotteellasi ole konkreettista palvelinpuolen tarvetta.
SDK käyttää fetchiä ja selaimessa näkyviä projektitunnuksia, joten alusta se asiakasmoduulissa. Älä sijoita salaisuuksia tai hallinta-API:en tunnuksia NEXT_PUBLIC-muuttujiin.
'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>;
}Tutustu taustalla olevaan pakettiin ja hallitun infrastruktuurin vastuurajaan.
Katso React-sovellusten yhteisiä komponentti- ja tilamalleja.
Tutustu vastauskenttiin, jatkokeskusteluihin ja virheisiin.
Käytä next/scriptiä ja ylläpidettyä widget-käyttöliittymää ilman omaa käännösvaihetta.
Kyllä. Käytä sitä asiakaskomponentissa interaktiiviseen chat-tilaan ja esitä komponentti App Router -sivulta tai -asettelusta.
Et tavalliseen selainintegraatioon. Julkiset widget-avaimet on suunniteltu asiakaskäyttöön, ja ne voidaan rajata hyväksyttyihin origineihin.
Julkinen widget-avain tunnistaa projektin, mutta se ei ole hallintatunnus. Rajaa se tuotanto- ja esikatseluorigineihisi äläkä koskaan paljasta hallinnollisia salaisuuksia.
Kyllä. Hostatun widgetin asennusopas näyttää next/script-ratkaisun, kun haluat ylläpidetyn käyttöliittymän mukautetun SDK-käyttöliittymän sijaan.
Luottokorttia ei vaadita. Sisältöäsi ei käytetä mallien kouluttamiseen.
Ilmainen taso. Ei korttia.