01
Mała granica klienta
Oznacz use client tylko interaktywny moduł czatu, zamiast przenosić całą stronę lub layout do przeglądarki.
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
Karta kredytowa nie jest wymaganaTwoje treści pozostają Twoje
Zapytaj ChattyBox
xOd 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.
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.
02
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.
03
Własny interfejs produktu
Wyświetlaj wiadomości i cytowania we własnej nawigacji, obszarze konta, obudowie dokumentacji lub przepływie wsparcia.
04
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.
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
01
SDK chatbota dla JavaScript
Poznaj bazowy pakiet i granice zarządzanej infrastruktury.
Otwórz
02
SDK chatbota dla React
Zobacz wzorce komponentów i stanu wspólne dla aplikacji React.
Otwórz
03
Dokumentacja API SDK
Poznaj pola odpowiedzi, dalsze konwersacje i błędy.
Otwórz
04
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.