01
Pieni asiakasrajapinta
Merkitse use client -direktiivillä vain interaktiivinen chat-moduuli koko sivun tai asettelun siirtämisen sijaan selaimeen.
Next.js-chatbot-SDK
Lisää mukautettu AI-chatbot Next.js-sovellukseen
Käytä @openstaticfish/chattybox-pakettia rajatussa asiakasrajapinnassa, kun muu App Router -sovellus säilyy palvelinrenderöitynä. ChattyBox hoitaa tiedonhaun, lähdeviitteet, keskustelut ja skaalauksen.
Indeksoi julkaistut asiakirjasivut
Lähdeviittauksia
Upota yhdellä skriptillä
Asiakirjojen siirtoa ei vaadita
Luottokorttia ei vaaditaSisältösi pysyy sinun
Kysy ChattyBoxilta
xMistä minun kannattaa aloittaa, jos tarvitsen luotettavan vastauksen tältä sivustolta?
Aloita lisäämällä verkkosivustosi URL ChattyBoxiin. Se haravoi sisältösi, vastaa löytämiensä sivujen perusteella ja näyttää kävijöille jokaisen vastauksen lähteet.
iLähteet3^
Next.js-alusta opas
chattybox.ai
Analytiikka
chattybox.ai
Etusivu
chattybox.ai
Esitä kysymys...
Palvelun tarjoaa ChattyBox
Rakennettu mallille Next.js App Router -tiimit
Käynnistä lähteeseen viitattu chatbot rakentamatta uudelleen dokumenttipinoasi
ChattyBox indeksoi olemassa olevan dokumentaatiosi, indeksoi sisällön haettavaksi ja upottaa chatbotin, joka vastaa käyttämällä asiakirjojasi yleisen mallimuistin sijaan.
Pidä interaktiivinen chat-näkymä pienessä use client -rajapinnassa.
Tuo selaimeen NEXT_PUBLIC-muuttujilla vain julkinen, origineihin rajattu widget-avain.
Esitä lähdeviitteelliset vastaukset nykyisellä Next.js-design systemilläsi ja sovelluskuorellasi.
Anna ChattyBoxin hallita haravointi, tiedonhaku, vektoritallennus, vastausten luonti ja skaalaus.
Työnkulun vaihe
Asenna @openstaticfish/chattybox Next.js-sovellukseen.
Työnkulun vaihe
Lisää julkinen widgetin API-avain ja API-URL-osoite NEXT_PUBLIC-ympäristömuuttujina.
Työnkulun vaihe
Luo asiakaskomponentti chatin tilalle ja selainvuorovaikutukselle.
Työnkulun vaihe
Tuo asiakaskomponentti palvelinkomponenttina toimivalle sivulle tai asetteluun.
Kolmivaiheinen käynnistys
Liitä Next.js-alusta URL-osoite, testaa lainatut vastaukset ja asenna sitten widget.
App Router -integraatio
Lisää interaktiivisuus luopumatta palvelinrenderöinnistä
Pidä SDK asiakasrajalla, jossa chat-vuorovaikutus tapahtuu, ja säilytä palvelinkomponentit muualla sovelluksessa.
02
Selkeä julkisten avainten käyttö
Käytä selaimessa turvallista projektiavainta sallituilla origineilla; älä koskaan paljasta hallintatunnuksia NEXT_PUBLIC-muuttujissa.
03
Mukautettu tuotekäyttöliittymä
Esitä viestit ja lähdeviitteet omassa navigaatiossasi, käyttäjäalueellasi, dokumentaatiokuoressasi tai tukityönkulussasi.
04
Ei omaa RAG-palvelua
Älä lisää route handlereita vain hallitun selain-API:n välityspalvelimeksi, ellei tuotteellasi ole konkreettista palvelinpuolen tarvetta.
Asennuspolku
Luo Next.js App Router -chat-asiakas
SDK käyttää fetchiä ja selaimessa näkyviä projektitunnuksia, joten alusta se asiakasmoduulissa. Älä sijoita salaisuuksia tai hallinta-API:en tunnuksia NEXT_PUBLIC-muuttujiin.
- 1Asenna npm-paketti ja määritä origineihin rajattu julkinen avain.
- 2Luo use client -komponentti, joka hallitsee viestien ja keskustelun tilaa.
- 3Esitä komponentti palvelinrenderöidyllä sivulla muuttamatta koko reittiä asiakaskomponentiksi.
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>;
}Tutustu seuraavaksi
Lisää tapoja käyttää ChattyBoxia
01
JavaScript-chatbot-SDK
Tutustu taustalla olevaan pakettiin ja hallitun infrastruktuurin vastuurajaan.
Avaa
02
React-chatbot-SDK
Katso React-sovellusten yhteisiä komponentti- ja tilamalleja.
Avaa
03
SDK:n API-viite
Tutustu vastauskenttiin, jatkokeskusteluihin ja virheisiin.
Avaa
04
Hostattu Next.js-widget
Käytä next/scriptiä ja ylläpidettyä widget-käyttöliittymää ilman omaa käännösvaihetta.
Avaa
UKK
Yleisiä kysymyksiä
Toimiiko ChattyBox SDK Next.js App Routerin kanssa?
Kyllä. Käytä sitä asiakaskomponentissa interaktiiviseen chat-tilaan ja esitä komponentti App Router -sivulta tai -asettelusta.
Tarvitsenko Next.js route handlerin ChattyBoxia varten?
Et tavalliseen selainintegraatioon. Julkiset widget-avaimet on suunniteltu asiakaskäyttöön, ja ne voidaan rajata hyväksyttyihin origineihin.
Ovatko NEXT_PUBLIC ChattyBox -avaimet salaisuuksia?
Julkinen widget-avain tunnistaa projektin, mutta se ei ole hallintatunnus. Rajaa se tuotanto- ja esikatseluorigineihisi äläkä koskaan paljasta hallinnollisia salaisuuksia.
Voinko käyttää hostattua ChattyBox-widgetiä Next.js:n kanssa?
Kyllä. Hostatun widgetin asennusopas näyttää next/script-ratkaisun, kun haluat ylläpidetyn käyttöliittymän mukautetun SDK-käyttöliittymän sijaan.
Aloita ilmaiseksi
Luottokorttia ei vaadita. Sisältöäsi ei käytetä mallien kouluttamiseen.
Luo ilmainen chatbot
Ilmainen taso. Ei korttia.