AI Elements Chatbot — production-ready AI chat UI components for Vercel AI SDK v5
Construire des interfaces de chat style ChatGPT prêtes pour la prod avec AI Elements (shadcn/ui) : 30+ composants — Message, Conversation, Response, CodeBlock, Reasoning, Tool, Actions, Sources — avec streaming, affichages d'appels d'outils et guides de prévention d'erreurs pour Next.js App Router, Tailwind v4 et AI SDK v5
- Quoi
- Construire des interfaces de chat style ChatGPT prêtes pour la prod avec AI Elements (shadcn/ui) : 30+ composants — Message, Conversation, Response, CodeBlock, Reasoning, Tool, Actions, Sources — avec streaming, affichages d'appels d'outils et guides de prévention d'erreurs pour Next.js App Router, Tailwind v4 et AI SDK v5
- Coût
- Gratuit
- Prérequis
- Node.js 18+, un projet Next.js 15+ (App Router) avec shadcn/ui initialisé et le AI SDK v5 installé ([email protected]+) — vérifie d'abord avec `npx next --version` et `npm list ai` ; optionnel : clé API Vercel AI Gateway
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill ai-elements-chatbot de @jackspace, listé ici avec crédit à son créateur : une recette prête pour la production pour construire des interfaces de chat style ChatGPT avec AI Elements sur shadcn/ui, ciblée Vercel AI SDK v5. Il livre un démarrage rapide en 15 minutes (vérifications de prérequis, install CLI, une page de chat fonctionnelle avec markdown streamé, auto-scroll et input auto-redimensionné), un processus d'installation en 5 étapes, 30+ composants documentés (Message, Conversation, Response, CodeBlock, Reasoning, Tool, Actions, Sources, PromptInput) et des guides de prévention pour les 8 modes d'échec les plus courants (particularités Next.js App Router, intégration Tailwind v4 + shadcn, migration AI SDK v4→v5, composition de composants, compatibilité navigateur de la saisie vocale, responsive, optimisation du streaming). Note de chevauchement : la fiche ai-elements de @full-stack-skills dans ce même lot couvre la même librairie comme guide général d'installation/composants — ce skill est la recette de chatbot de production, optimisée pour l'IA conversationnelle avec appels d'outils, visualisation du raisonnement et citations de sources. Bémols honnêtes : épingle des versions précises (ai-elements 1.6.0, ai 5.0+, next 15+, react 19+) — la dérive de version est le risque principal ; le skill revendique des patterns testés en production et des économies de tokens, ce sont ses affirmations, pas celles de Skill Harbor. 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 : Node.js 18+, un projet Next.js 15+ (App Router) avec shadcn/ui initialisé et le AI SDK v5 installé ([email protected]+) — vérifie d'abord avec `npx next --version` et `npm list ai` ; optionnel : clé API Vercel AI Gateway Installe-moi « AI Elements Chatbot — composants UI de chat IA prêts pour la prod pour Vercel AI SDK v5 ». Il donne à mon agent la recette de chatbot AI Elements de @jackspace : exécuter le démarrage rapide de 15 minutes (vérifications de prérequis, install CLI ai-elements, une page de chat fonctionnelle avec markdown streamé, auto-scroll et input auto-redimensionné), suivre le processus d'installation en 5 étapes, utiliser les 30+ composants documentés (Message, Conversation, Response, CodeBlock, Reasoning, Tool, Actions, Sources, PromptInput) et appliquer les guides de prévention d'erreurs pour Next.js App Router, Tailwind v4 et les pièges de migration AI SDK v5. Licence MIT. Dépôt : https://github.com/jackspace/claudeskillz/blob/main/skills/ai-elements-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. 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é « ai-elements-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 mes prérequis Next.js 15+ / AI SDK v5 / shadcn ; lancer l'init CLI ai-elements ; confirmer que les versions épinglées correspondent toujours à ma stack — la dérive de version est le risque principal). 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.