AI Elements — build AI chat UIs with shadcn-based React components
Construire des interfaces de chat IA avec la librairie de composants AI Elements (shadcn/ui) : conversations, messages, affichages d'outils, champs de prompt — installables via CLI dans votre code, avec dépannage pour Next.js, Tailwind v4 et AI SDK
- Quoi
- Construire des interfaces de chat IA avec la librairie de composants AI Elements (shadcn/ui) : conversations, messages, affichages d'outils, champs de prompt — installables via CLI dans votre code, avec dépannage pour Next.js, Tailwind v4 et AI SDK
- Coût
- Gratuit
- Prérequis
- Node.js 18+, un projet Next.js existant avec shadcn/ui installé, le AI SDK (package `ai`) installé — optionnel : une clé API Vercel AI Gateway (niveau gratuit 5 $/mois d'usage) pour éviter d'avoir chaque clé fournisseur
- 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 @full-stack-skills, listé ici avec crédit à son créateur : un guide d'installation et d'usage d'AI Elements, la librairie de composants shadcn/ui pour les applications IA natives (conversations, messages, affichages d'outils, champs de prompt et plus). Il couvre les prérequis (Node 18+, Next.js, AI SDK, shadcn/ui), l'installation de composants via la CLI AI Elements dans votre propre code (`components/ai-elements/`, propriété totale du source), les patterns d'usage avec `useChat` du AI SDK, l'extensibilité (tous les primitifs étendent les attributs HTML standards) et le dépannage (composants non stylés, CLI sans effet, bascule de thème, imports manquants, alias tsconfig). Note de chevauchement : la fiche ai-elements-chatbot de @jackspace dans ce même lot couvre la même librairie sous l'angle recette de chatbot de production — ce skill est le guide général d'installation et de composants. Bémols honnêtes : exige un projet Next.js + shadcn/ui existant ; le skill recommande l'AI Gateway Vercel pour l'accès aux modèles (niveau gratuit 5 $/mois d'usage) ; la librairie vise React/Next.js uniquement. Licence Apache-2.0. 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 existant avec shadcn/ui installé, le AI SDK (package `ai`) installé — optionnel : une clé API Vercel AI Gateway (niveau gratuit 5 $/mois d'usage) pour éviter d'avoir chaque clé fournisseur Installe-moi « AI Elements — construire des interfaces de chat IA avec des composants React basés sur shadcn ». Il donne à mon agent le guide AI Elements de @full-stack-skills : vérifier les prérequis, installer les composants via la CLI ai-elements (composants copiés dans components/ai-elements/ avec propriété totale du source), les brancher avec useChat du AI SDK, étendre et personnaliser les primitifs, et dépanner les échecs courants (composants non stylés, config Tailwind v4, bascule de thème, résolution de modules, alias tsconfig). Licence Apache-2.0. Dépôt : https://github.com/full-stack-skills/react-skills/blob/main/skills/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. vérifier que shadcn/ui est initialisé dans mon projet Next.js ; lancer la CLI ai-elements avec le runner de mon projet ; optionnellement ajouter AI_GATEWAY_API_KEY à env.local). 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.