Siirry pääsisältöön
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
x
Mistä 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.

Rakenna Next.js-chatbot
App Router -integraatio

Lisää interaktiivisuus luopumatta palvelinrenderöinnistä

Pidä SDK asiakasrajalla, jossa chat-vuorovaikutus tapahtuu, ja säilytä palvelinkomponentit muualla sovelluksessa.

01

Pieni asiakasrajapinta

Merkitse use client -direktiivillä vain interaktiivinen chat-moduuli koko sivun tai asettelun siirtämisen sijaan selaimeen.

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.

  1. 1Asenna npm-paketti ja määritä origineihin rajattu julkinen avain.
  2. 2Luo use client -komponentti, joka hallitsee viestien ja keskustelun tilaa.
  3. 3Esitä komponentti palvelinrenderöidyllä sivulla muuttamatta koko reittiä asiakaskomponentiksi.
Rakenna Next.js-chatbot
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>;
}
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.