AI Elements — pre-built AI chat UI components on shadcn/ui
Créer des interfaces de chat IA plus vite avec les composants ai-elements — conversations, messages, affichages d'outils et champs de prompt pour applis Next.js avec shadcn/ui et le Vercel AI SDK
- Quoi
- Créer des interfaces de chat IA plus vite avec les composants ai-elements — conversations, messages, affichages d'outils et champs de prompt pour applis Next.js avec shadcn/ui et le Vercel AI SDK
- Coût
- Gratuit
- Prérequis
- un projet Next.js avec Node.js 18+, le Vercel AI SDK installé, et shadcn/ui (le CLI ai-elements l'installe automatiquement si absent) ; une clé API Vercel AI Gateway est recommandée (petit crédit d'usage mensuel pour les expériences avec les modèles)
- 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 de @mxyhi : un guide de terrain pour construire des interfaces de chat IA à partir de la bibliothèque de composants ai-elements (un registre shadcn/ui custom pour applis IA-natives). L'agent passe en revue les vrais prérequis (Node 18+, un projet Next.js avec le Vercel AI SDK, shadcn/ui — auto-installé par le CLI si absent, plus la clé Vercel AI Gateway avec son petit crédit d'usage mensuel), installe les composants via le CLI ai-elements ou le CLI shadcn (en lançant chaque commande CLI avec le package runner du projet), et les compose dans le code — Message, MessageContent, MessageResponse, conversations, affichages d'outils, champs de prompt — avec des composants copiés dans le projet pour pouvoir les ouvrir, restyler et étendre comme du code écrit à la main. Il couvre la personnalisation (classes Tailwind, passthrough des props primitives), des notes d'extensibilité, et une section de dépannage pour les pannes courantes (composants non stylés avec Tailwind 4, fichiers absents après install CLI, changement de thème, alias d'imports module-not-found, assistants de code qui ne voient pas les composants), et pointe vers le dossier references/ pour la doc par composant. Bémols honnêtes : les composants sont du code qui atterrit dans ton repo — tu en deviens propriétaire, mises à jour incluses ; lié à la stack React/Next.js + Tailwind, pas un kit UI agnostique. Licence : le manifest enregistre Apache-2.0 (le manifest fait foi) ; le frontmatter du repo ne porte aucun champ de licence. 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 avec Node.js 18+, le Vercel AI SDK installé, et shadcn/ui (le CLI ai-elements l'installe automatiquement si absent) ; une clé API Vercel AI Gateway est recommandée (petit crédit d'usage mensuel pour les expériences avec les modèles) Installe-moi « AI Elements — composants d'UI de chat IA prêts à l'emploi sur shadcn/ui ». Il donne à mon agent le guide de terrain AI Elements de @mxyhi : vérifier les prérequis Node/Next.js/AI SDK/shadcn (y compris la clé AI Gateway dans env.local), installer les composants ai-elements avec le package runner du projet (npx/pnpm dlx/bunx ai-elements@latest), les importer et les composer comme des composants React ordinaires (Message, MessageContent, MessageResponse, conversations, affichages d'outils, champs de prompt — du code qui vit dans le projet et peut être restylé ou étendu), corriger les pannes usuelles (styles de base Tailwind 4, config components.json manquante, alias de chemins tsconfig, changement de thème data-theme), et consulter le dossier references/ pour la documentation par composant. Licence Apache-2.0 (selon le manifest de découverte ; le frontmatter du repo ne porte aucun champ de licence). Dépôt : https://github.com/mxyhi/ok-skills/blob/main/ai-elements/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 ». 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. préparer les prérequis Next.js + AI SDK + shadcn, ajouter la clé AI Gateway dans env.local, lancer le CLI ai-elements pour récupérer les composants voulus). 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.