shadcn MCP Server

Vue d’ensemble

Le shadcn MCP Server est l’implémentation officielle du Model Context Protocol (MCP) pour shadcn/ui. Il permet aux assistants et agents IA de se connecter en toute sécurité à des registres de composants compatibles avec shadcn, de parcourir les composants disponibles, de rechercher des éléments spécifiques, de récupérer le code source, des démos et des métadonnées, et même de les installer directement dans les projets via des instructions en langage naturel.

Cela élimine les problèmes courants de l’IA, comme les connaissances obsolètes ou les props halluciné(e)s, en fournissant un accès structuré et en temps réel aux données les plus récentes du registre, tout en s’intégrant avec le CLI de shadcn.

Fonctionnalités

• Parcourir et rechercher des registres : L’IA peut lister et interroger des composants, blocs et graphiques depuis n’importe quel registre compatible shadcn.
• Récupérer des données précises : Accédez au code source TypeScript à jour, aux props/interfaces, aux exemples d’utilisation et aux commandes d’installation.
• Installation directe : Permet à l’IA d’exécuter automatiquement les commandes shadcn add via le pont CLI intégré.
• Registres indépendants du framework : Fonctionne avec tout registre shadcn (officiel ou personnalisé), y compris des composants basés sur React et Tailwind.
• Exécution locale sécurisée : Fonctionne comme un serveur local (souvent via npx ou un package installé) avec authentification configurable.
• Intégration IDE et outils : Support natif dans des outils comme Cursor, Claude Desktop, Zed et autres compatibles MCP.

Fonctionnement

1. Installez le serveur MCP (généralement via npx ou la configuration du projet).
2. Configurez votre registre dans components.json.
3. Connectez votre assistant IA au point de terminaison MCP local.
4. Utilisez des instructions en langage naturel comme « ajoute un beau tableau de bord avec des graphiques shadcn » — l’IA interroge le registre, sélectionne les composants et les installe.

Cas d’utilisation

• Prototypage d’UI assisté par IA dans Cursor ou Claude Code.
• Automatisation de l’installation de composants dans de grandes bases de code.
• Mise en place de workflows multi-agents où un agent recherche des composants et un autre assemble l’UI.
• Intégration de registres personnalisés pour des systèmes de design d’entreprise.

Prise en main

Consultez la documentation officielle : https://ui.shadcn.com/docs/mcp

Démarrage typique :

npx shadcn@latest mcp

ou en le configurant dans votre projet et en l’utilisant avec des outils IA compatibles.

De nombreux forks communautaires et versions améliorées existent (par exemple avec prise en charge multi-framework pour Svelte/Vue), mais la version officielle de shadcn/ui est recommandée pour la plupart des utilisateurs.