01
Petite frontière client
Marquez uniquement le module de chat interactif avec use client au lieu de transférer une page ou un layout entier dans le navigateur.
SDK de chatbot Next.js
Ajoutez un chatbot IA personnalisé à votre application Next.js
Utilisez @openstaticfish/chattybox dans une frontière client ciblée tandis que le reste de votre application App Router reste rendu côté serveur. ChattyBox gère la recherche, les citations, les conversations et la mise à l'échelle.
Analyse les pages de documents publiées
Réponses citées par la source
S'intègre avec un seul script
Aucune migration de documents requise
Aucune carte de crédit requiseVotre contenu reste à vous
Demander à ChattyBox
xPar où commencer si j’ai besoin d’une réponse fiable depuis ce site ?
Commencez par ajouter l’URL de votre site web à ChattyBox. Il explore votre contenu, répond à partir des pages trouvées et montre aux visiteurs les sources derrière chaque réponse.
iSources citées3^
Intégration Next.js Guide
chattybox.ai
Statistiques
chattybox.ai
Accueil
chattybox.ai
Posez une question...
Propulsé par ChattyBox
Conçu pour Équipes utilisant l'App Router de Next.js
Lancez un chatbot avec citations de sources sans reconstruire votre stack de docs
ChattyBox explore votre documentation existante, indexe le contenu pour la recherche et intègre un chatbot qui répond avec vos docs plutôt qu’avec la mémoire générique du modèle.
Conservez la surface de chat interactive dans une petite frontière use client.
N'exposez qu'une clé publique du widget, limitée par origine, via des variables NEXT_PUBLIC.
Affichez les réponses avec citations dans le design system et l'enveloppe applicative Next.js que vous utilisez déjà.
Confiez à ChattyBox la gestion de l'exploration, de la recherche, du stockage vectoriel, de la génération des réponses et de la mise à l'échelle.
Étape du workflow
Installez @openstaticfish/chattybox dans l'application Next.js.
Étape du workflow
Ajoutez la clé API publique du widget et l'URL de l'API sous forme de variables d'environnement NEXT_PUBLIC.
Étape du workflow
Créez un composant client pour l'état du chat et les interactions dans le navigateur.
Étape du workflow
Importez ce composant client depuis une page ou un layout Server Component.
Un lancement en trois étapes
Collez votre URL Intégration Next.js, testez les réponses citées, puis installez le widget.
Intégration App Router
Ajoutez de l'interactivité sans renoncer au rendu côté serveur
Gardez le SDK à la frontière client où se déroule l'interaction avec le chat et conservez les Server Components pour le reste de l'application.
02
Clarté des clés publiques
Utilisez une clé de projet compatible avec le navigateur et des origines autorisées ; n'exposez jamais d'identifiants de gestion via des variables NEXT_PUBLIC.
03
Interface produit personnalisée
Affichez les messages et les citations dans votre navigation, votre espace client, votre interface de documentation ou votre workflow de support.
04
Aucun service RAG personnalisé
Évitez d'ajouter des route handlers uniquement pour relayer une API de navigateur gérée, sauf si votre produit présente un besoin concret côté serveur.
Parcours d’installation
Créer un client de chat pour l'App Router de Next.js
Le SDK utilise fetch et des identifiants de projet visibles dans le navigateur : initialisez-le donc dans un module client. Ne placez jamais de secrets ni d'API de gestion dans des variables NEXT_PUBLIC.
- 1Installez le package npm et configurez une clé publique limitée par origine.
- 2Créez un composant use client qui gère l'état des messages et de la conversation.
- 3Affichez le composant depuis votre page rendue côté serveur sans convertir toute la route en composant client.
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>;
}À explorer ensuite
Plus de façons d’utiliser ChattyBox
01
SDK de chatbot JavaScript
Découvrez le package sous-jacent et la frontière de l'infrastructure gérée.
Ouvrir
02
SDK de chatbot React
Découvrez les modèles de composants et d'état communs aux applications React.
Ouvrir
03
Référence de l'API du SDK
Consultez les champs de réponse, les conversations de suivi et les erreurs.
Ouvrir
04
Widget Next.js hébergé
Utilisez next/script et l'interface de widget maintenue pour une expérience de chat sans build.
Ouvrir
Questions fréquentes
Questions fréquentes
Le SDK ChattyBox fonctionne-t-il avec l'App Router de Next.js ?
Oui. Utilisez-le dans un composant client pour l'état interactif du chat et affichez ce composant depuis une page ou un layout de l'App Router.
Ai-je besoin d'un route handler Next.js pour ChattyBox ?
Pas pour l'intégration normale dans le navigateur. Les clés publiques du widget sont conçues pour une utilisation côté client et peuvent être limitées aux origines autorisées.
Les clés ChattyBox NEXT_PUBLIC sont-elles des secrets ?
La clé publique du widget identifie un projet, mais ne constitue pas un identifiant de gestion. Limitez-la à vos origines de production et de prévisualisation, et n'exposez jamais de secrets administratifs.
Puis-je utiliser le widget ChattyBox hébergé avec Next.js ?
Oui. Le guide d'installation hébergée présente l'approche next/script si vous préférez une interface maintenue à une interface SDK personnalisée.
Commencer gratuitement
Aucune carte de crédit requise. Votre contenu n’est pas utilisé pour l’entraînement de modèles.
Créer un chatbot gratuit
Niveau Free. Aucune carte requise.