Next.js Chatbot — production patterns for web chatbots (AI SDK 7)
Blueprint opinionné pour chatbots web Next.js de production : ToolLoopAgent AI SDK 7, approbation humaine des outils (HITL), persistance des sessions PostgreSQL, consent gating, recherche SQL-first, rendu UI par outil, widget popup embarquable, gestion d'erreurs de streaming, theming et evals
- Quoi
- Blueprint opinionné pour chatbots web Next.js de production : ToolLoopAgent AI SDK 7, approbation humaine des outils (HITL), persistance des sessions PostgreSQL, consent gating, recherche SQL-first, rendu UI par outil, widget popup embarquable, gestion d'erreurs de streaming, theming et evals
- Coût
- Gratuit
- Prérequis
- un projet Next.js (stack opinionnée : bun, AI SDK 7, shadcn/ui + ai-elements, Drizzle + PostgreSQL) ; une clé API de modèle facturée pour les réponses live ; vérifier package.json — les codebases v6 ont besoin du tableau de traduction des noms v6 inclus dans le skill
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill nextjs-chatbot de @laguagu, listé ici avec crédit à son créateur : un blueprint opinionné pour chatbots web de production qui couvre les patterns que la doc du SDK omet. Il donne à l'agent des defaults de stack (runtime bun, `ToolLoopAgent` AI SDK 7 avec tableau de repli v6, shadcn/ui + ai-elements, Drizzle + PostgreSQL, état client Zustand), le setup d'agent avec configuration portable de l'effort de raisonnement, un route handler avec consent gating et upsert de session, l'approbation humaine des outils (HITL) avec machine à 6 états de rendu, la gestion de l'état de streaming des messages (statut au niveau du chat, pas des tool-parts) pour stopper le scintillement des icônes d'action, `MessageScroller` plutôt qu'un stick-to-bottom maison, du markdown stable en streaming via shadcn typeset, l'embarquement de widget popup (FAB + iframe + widget.js), des conseils de recherche SQL-first, le rendu UI par outil, le feedback des messages persisté en base, des blocs de scope enforcement et de défense contre l'injection de prompt pour le system prompt, des règles de grounding contre les noms de composants hallucinés, et une séparation des tests (harnais UI sans modèle vs benchmarks modèle pour la stabilité). Bémols honnêtes : stack opinionnée (bun, Drizzle, shadcn) — à adapter si la vôtre diffère ; les snippets sont aux noms de l'AI SDK v7 et échouent silencieusement sur des codebases v6 (vérifier package.json) ; nécessite une clé API de modèle facturée et PostgreSQL pour la persistance complète ; vérifier les affirmations sensibles aux versions contre le SDK installé, pas cette page. Licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet Next.js (stack opinionnée : bun, AI SDK 7, shadcn/ui + ai-elements, Drizzle + PostgreSQL) ; une clé API de modèle facturée pour les réponses live ; vérifier package.json — les codebases v6 ont besoin du tableau de traduction des noms v6 inclus dans le skill Installe-moi « Next.js Chatbot — patterns de production pour chatbots web (AI SDK 7) ». Il donne à mon agent le blueprint de chatbot de production de @laguagu : setup ToolLoopAgent AI SDK 7, route handler avec consent gating et persistance des sessions PostgreSQL, approbation humaine des outils (HITL), rendu UI par outil, embarquement de widget popup, gestion d'erreurs de streaming (ne jamais faire fuiter le texte brut des erreurs vers le navigateur), scope enforcement et défense contre l'injection de prompt, règles de grounding, theming, et la séparation des tests (harnais UI vs benchmarks modèle). Licence MIT. Dépôt : https://github.com/laguagu/claude-code-nextjs-skills/blob/main/skills/nextjs-chatbot/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur — la clé de modèle vit dans l'env, jamais dans le code. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « nextjs-chatbot ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. vérifier ma version de l'AI SDK contre le tableau de traduction v6/v7 ; ajouter les serveurs MCP recommandés à .mcp.json ; créer les tables PostgreSQL chat_sessions/chat_messages ; garder ma clé de modèle dans l'env uniquement). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.