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 asiakirjasivutLähdeviittauksiaUpota yhdellä skriptilläAsiakirjojen siirtoa ei vaaditaLuottokorttia ei vaaditaSisältösi pysyy sinun
Kysy ChattyBoxilta
xMistä minun kannattaa aloittaa, jos tarvitsen luotettavan vastauksen tältä sivustolta?
Aloita lisäämällä julkisen sivustosi URL ChattyBoxiin. Se hakee indeksoitua sisältöä vastausten tueksi ja voi näyttää lähdesivulinkkejä kävijöiden tarkistettavaksi. Testaa vastaukset ja varavastaukset ennen julkaisua.
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
Lanseeraa lähdeviitteillä varustettu chatbot rakentamatta sivustosi pinoa uudelleen
ChattyBox indeksoi nykyisen verkkosivustosi, dokumentaatiosi, ohjekeskuksesi, CMS:si tai tietämyskantasi ja upottaa sitten chatbotin, joka vastaa omasta julkaistusta sisällöstäsi eikä mallin yleisen muistin perusteella.
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.
1Työnkulun vaihe
Asenna @openstaticfish/chattybox Next.js-sovellukseen.
2Työnkulun vaihe
Lisää julkinen widgetin API-avain ja API-URL-osoite NEXT_PUBLIC-ympäristömuuttujina.
3Työnkulun vaihe
Luo asiakaskomponentti chatin tilalle ja selainvuorovaikutukselle.
4Työ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.
Päätöksen polku
Käytä näitä tarkistuspisteitä päättääksesi, pitäisikö ChattyBox istua dokumenttialustan viereen, vaihtaa erillinen avustaja vai pysyä erillään testausta varten.
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
01JavaScript-chatbot-SDKTutustu taustalla olevaan pakettiin ja hallitun infrastruktuurin vastuurajaan.02React-chatbot-SDKKatso React-sovellusten yhteisiä komponentti- ja tilamalleja.03SDK:n API-viiteTutustu vastauskenttiin, jatkokeskusteluihin ja virheisiin.04Hostattu Next.js-widgetKäytä next/scriptiä ja ylläpidettyä widget-käyttöliittymää ilman omaa käännösvaihetta.
UKK
Yleisiä kysymyksiä
1
Toimiiko ChattyBox SDK Next.js App Routerin kanssa?
Kyllä. Käytä sitä asiakaskomponentissa interaktiiviseen chat-tilaan ja esitä komponentti App Router -sivulta tai -asettelusta.
2
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.
3
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.
4
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.