Aller au contenu

shadcn, serveur MCP

Parcourez, recherchez et installez les composants et blocs shadcn/ui en langage courant, depuis n'importe quel registre.

Officielpar shadcn/uiTourne sur votre ordinateurVérifié le 27 octobre 2026

Le serveur MCP de shadcn, issu du projet shadcn/ui, permet à Claude de lister, rechercher et afficher les composants, blocs et modèles du registre shadcn/ui et de tout autre registre déclaré dans le components.json de votre projet, y compris les bibliothèques privées de votre entreprise. Pour les éléments choisis, il renvoie la commande npx shadcn add exacte, si bien que les composants arrivent dans votre projet à partir d'une simple demande. Il tourne sur votre ordinateur via la CLI shadcn et ne demande aucun compte.

Pour qui

  • Développeurs qui créent des interfaces avec shadcn/ui
  • Personnes qui créent des sites avec Claude Code ou Cursor
  • Équipes qui partagent une bibliothèque de composants privée

Prompts à essayer

Une fois connecté, demandez avec vos mots. Votre outil d'IA décide quand utiliser le serveur et vous demande votre accord avant de modifier quoi que ce soit d'important.

Prompt 1
Montrez-moi les blocs de connexion du registre shadcn et ajoutez le plus simple à mon projet.
Prompt 2
Créez une section tarifs avec des composants shadcn : trois cartes d'offres, un interrupteur mensuel ou annuel et un accordéon de FAQ.
Prompt 3
Trouvez l'exemple de tableau de données dans le registre shadcn et adaptez-le pour lister mes commandes.

Ajouter le serveur MCP shadcn à Claude

MCP est un standard ouvert, ce serveur fonctionne donc dans Claude, ChatGPT, Codex, Cursor, VS Code et plus. Choisissez votre outil :

Le plus simple : collez ceci dans Claude Code
Connecte pour moi le serveur MCP shadcn à Claude Code : exécute cette commande : npx shadcn@latest mcp init --client claude
Si une valeur commence par YOUR_, demande-la-moi d'abord. Une fois connecté, aide-moi à me connecter si besoin et montre-moi une chose que je peux lui demander.

Ou faites-le vous-même :

npx shadcn@latest mcp init --client claude

Bon à savoir

Lancez la commande init dans votre projet, puis redémarrez Claude Code et vérifiez le serveur avec /mcp. shadcn documente la même commande pour Cursor, VS Code, Codex et OpenCode (--client cursor, vscode, codex ou opencode) ; pour Codex, elle affiche seulement les lignes à ajouter dans ~/.codex/config.toml, car la CLI ne peut pas modifier ce fichier.

Débloquez les étapes de configuration

Gratuit. Laissez votre email une seule fois pour ouvrir les étapes de configuration des 152 serveurs, et recevez chaque mois les meilleurs nouveaux connecteurs.

Pas de spam. Désinscription en un clic. Nous utilisons votre e-mail pour vous envoyer la formation et des conseils IA.

Comment nous l'avons vérifié

Vérifié la documentation MCP et le changelog de shadcn/ui (le serveur MCP est arrivé avec la CLI 3.0 en août 2025), le dépôt shadcn-ui/ui (MIT, 126.6k étoiles, commits jusqu'au 2026-10-26) et le package npm shadcn (4.22.1). Le 2026-10-27, nous avons lancé npx shadcn@latest mcp init --client claude dans un dossier de test vide : la commande a écrit .mcp.json et ajouté shadcn en dépendance de développement. Nous avons ensuite démarré le serveur, qui a listé 7 outils, et une recherche de formulaire de connexion dans le registre @shadcn a renvoyé deux blocs de connexion avec leurs commandes d'ajout. Nous ne l'avons pas encore utilisé dans Claude Code.

Source : ui.shadcn.com/docs/mcp

shadcn MCP : questions fréquentes

Avec quels outils d'IA le serveur MCP de shadcn fonctionne-t-il ?

La documentation de shadcn propose une installation en une commande pour Claude Code, Cursor, VS Code avec GitHub Copilot, Codex et OpenCode : lancez npx shadcn@latest mcp init dans votre projet avec --client claude, cursor, vscode, codex ou opencode. Pour Codex, ajoutez aussi le serveur à la main dans ~/.codex/config.toml, car la CLI shadcn ne peut pas modifier ce fichier. Tout autre client MCP peut lancer la même commande : npx avec les arguments shadcn@latest et mcp.

Faut-il un compte ou une clé API ?

Non. Le registre standard shadcn/ui ne demande aucune configuration. Seuls les registres privés qui exigent une connexion ont besoin d'un jeton, que vous gardez dans une variable d'environnement de .env.local et transmettez dans les headers du registre dans components.json.

Peut-il utiliser les composants de mon entreprise ?

Oui. Il fonctionne avec tout registre conforme à la spécification des registres shadcn : le registre shadcn/ui par défaut, des registres tiers et des bibliothèques privées d'entreprise. Ajoutez chacun à la section registries de components.json sous un namespace comme @internal, puis demandez des éléments par leur nom, par exemple @internal/auth-form.

Que faire si mon outil d'IA affiche No tools or prompts pour shadcn ?

Les étapes de dépannage de shadcn : videz le cache npx avec npx clear-npx-cache, désactivez puis réactivez le serveur MCP dans votre outil d'IA et consultez ses journaux (dans Cursor, View > Output, puis MCP: project-* dans la liste déroulante). Si l'installation des composants échoue, vérifiez que votre projet a un components.json valide et que les dossiers cibles existent.

Nous avons rédigé ces réponses à partir des pages officielles de chaque produit cité, consultées le 27 octobre 2026.

Autres serveurs pour développeurs