SDK chatbota dla Next.js

Dodaj własnego chatbota AI do aplikacji Next.js

Używaj @openstaticfish/chattybox w wąskiej granicy klienta, podczas gdy reszta aplikacji App Router pozostaje renderowana po stronie serwera. ChattyBox obsługuje wyszukiwanie, cytowania, konwersacje i skalowanie.

Indeksuje opublikowane strony dokumentacji

Odpowiedzi z cytowaniami źródeł

Osadzenie jednym skryptem

Bez migracji dokumentacji

Zbuduj chatbota dla Next.js Przeczytaj dokumentację SDK

Karta kredytowa nie jest wymaganaTwoje treści pozostają Twoje

Zapytaj ChattyBox

Od czego zacząć, jeśli potrzebuję wiarygodnej odpowiedzi z tej strony?

Zacznij od dodania adresu URL swojej strony do ChattyBox. Narzędzie indeksuje Twoje treści, odpowiada na podstawie znalezionych stron i pokazuje odwiedzającym źródła każdej odpowiedzi.

iŹródła3^

Integracja z Next.js przewodnik

chattybox.ai

Analityka

chattybox.ai

Strona główna

chattybox.ai

Zadaj pytanie...

Obsługiwane przez ChattyBox

Zbudowany dla Zespoły korzystające z Next.js App Router

Uruchom chatbota cytowanego w źródle bez konieczności ponownego tworzenia stosu dokumentów

ChattyBox przeszukuje istniejącą dokumentację, indeksuje treść w celu pobrania i osadza chatbota, który odpowiada, korzystając z dokumentów zamiast ogólnej pamięci modelu.

Umieść interaktywny interfejs czatu w małej granicy use client.

Udostępniaj przez zmienne NEXT_PUBLIC wyłącznie publiczny klucz widżetu ograniczony do zatwierdzonych źródeł.

Wyświetlaj odpowiedzi z cytowaniami za pomocą istniejącego systemu projektowego Next.js i obudowy aplikacji.

Pozostaw indeksowanie, wyszukiwanie, przechowywanie wektorów, generowanie odpowiedzi i skalowanie po stronie ChattyBox.

Krok przepływu pracy

Zainstaluj @openstaticfish/chattybox w aplikacji Next.js.

Krok przepływu pracy

Dodaj publiczny klucz API widżetu i adres URL API jako zmienne środowiskowe NEXT_PUBLIC.

Krok przepływu pracy

Utwórz komponent kliencki obsługujący stan czatu i interakcje w przeglądarce.

Krok przepływu pracy

Zaimportuj komponent kliencki na stronie lub w layoucie będącym komponentem serwerowym.

Uruchomienie w trzech krokach

Wklej swój adres URL Integracja z Next.js, przetestuj cytowane odpowiedzi, a następnie zainstaluj widżet.

Zbuduj chatbota dla Next.js

Integracja z App Router

Dodaj interaktywność bez rezygnacji z renderowania serwerowego

Umieść SDK na krawędzi klienckiej, gdzie odbywa się interakcja z czatem, i zachowaj komponenty serwerowe dla reszty aplikacji.

Ścieżka decyzji

Skorzystaj z tych punktów kontrolnych, aby zdecydować, czy ChattyBox powinien siedzieć obok Twojej platformy dokumentów, zastąpić osobnego asystenta, czy też pozostać odizolowany na czas testów.

Mała granica klienta

Oznacz use client tylko interaktywny moduł czatu, zamiast przenosić całą stronę lub layout do przeglądarki.

Jasne zasady dla klucza publicznego

Używaj bezpiecznego dla przeglądarki klucza projektu z dozwolonymi źródłami; nigdy nie ujawniaj danych dostępowych do zarządzania przez zmienne NEXT_PUBLIC.

Własny interfejs produktu

Wyświetlaj wiadomości i cytowania we własnej nawigacji, obszarze konta, obudowie dokumentacji lub przepływie wsparcia.

Bez własnej usługi RAG

Nie dodawaj route handlers wyłącznie do pośredniczenia w zarządzanym API przeglądarkowym, chyba że produkt ma konkretny wymóg po stronie serwera.

Ścieżka instalacji

Utwórz klienta czatu dla Next.js App Router

SDK używa fetch i danych projektu widocznych w przeglądarce, dlatego zainicjuj je w module klienckim. Nie umieszczaj sekretów ani interfejsów API do zarządzania w zmiennych NEXT_PUBLIC.

1Zainstaluj pakiet npm i skonfiguruj publiczny klucz ograniczony do zatwierdzonych źródeł.
2Utwórz komponent use client zarządzający stanem wiadomości i konwersacji.
3Wyświetl komponent na stronie renderowanej po stronie serwera bez przekształcania całej trasy w komponent kliencki.

Zbuduj chatbota dla Next.js

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>;
}

Zobacz dalej

Więcej sposobów użycia ChattyBox

Przeglądaj przewodniki po platformach

SDK chatbota dla JavaScript

Poznaj bazowy pakiet i granice zarządzanej infrastruktury.

Otwórz

SDK chatbota dla React

Zobacz wzorce komponentów i stanu wspólne dla aplikacji React.

Otwórz

Dokumentacja API SDK

Poznaj pola odpowiedzi, dalsze konwersacje i błędy.

Otwórz

Hostowany widżet dla Next.js

Użyj next/script i utrzymywanego interfejsu widżetu, aby uruchomić czat bez kompilacji.

Otwórz

Najczęstsze pytania

Często zadawane pytania

Czy SDK ChattyBox działa z Next.js App Router?

Tak. Użyj go w komponencie klienckim do obsługi interaktywnego stanu czatu i wyświetl ten komponent na stronie lub w layoucie App Router.

Czy potrzebuję route handler Next.js dla ChattyBox?

Nie w typowej integracji przeglądarkowej. Publiczne klucze widżetu są przeznaczone do użycia po stronie klienta i można je ograniczyć do zatwierdzonych źródeł.

Czy klucze ChattyBox w NEXT_PUBLIC są sekretami?

Publiczny klucz widżetu identyfikuje projekt, ale nie jest danymi dostępowymi do zarządzania. Ogranicz go do źródeł produkcyjnych i podglądowych oraz nigdy nie ujawniaj sekretów administracyjnych.

Czy mogę użyć hostowanego widżetu ChattyBox z Next.js?

Tak. Przewodnik instalacji hostowanej pokazuje sposób z next/script, jeśli wolisz utrzymywany interfejs zamiast własnego interfejsu SDK.

Zacznij bezpłatnie

Karta kredytowa nie jest wymagana. Twoje treści nie są używane do trenowania modeli.

Stwórz darmowego chatbota

Plan Free. Bez karty.