Shadcn UI MCP Server

Qu'est-ce que le serveur Shadcn UI MCP ?

Le serveur Shadcn UI MCP est un serveur MCP open-source qui expose les composants shadcn/ui et les ressources associées aux applications IA. Il permet aux modèles de langage et aux agents intelligents de récupérer de manière programmatique le code source des composants, de visualiser des démonstrations d'utilisation et de générer des scripts d'installation ou des guides spécifiques à des frameworks via une interface standardisée. Cela facilite l'intégration transparente des connaissances sur les composants shadcn/ui dans des flux de travail pilotés par IA et des assistants de code.

Comment configurer

1. Clonez le dépôt dans votre environnement de développement.

2. Assurez-vous d'avoir Node.js (v18 ou supérieur) et npm installés.

3. Installez les dépendances avec :

   npm install
   

4. Construisez et démarrez le serveur avec :

   bash startup.sh
   

   ou les mêmes étapes individuellement :

   npm run clean
   npm run build
   npm run start
   

5. Pour activer l'intégration avec d'autres applications (par exemple, le mode Agent de VS Code), configurez votre client (comme le settings.json de VS Code) pour se connecter au point de terminaison SSE, par exemple :

   "mcp": {
       "servers": {
           "shadcnui": {
               "type": "sse",
               "url": "http://localhost:3001/sse"
           }
       }
   }
   

6. En option, utilisez l'Inspecteur MCP intégré (par défaut à http://127.0.0.1:6274) pour le débogage interactif et l'inspection du serveur.

Comment utiliser

1. Démarrez le serveur et vérifiez qu'il fonctionne (point de terminaison SSE par défaut à http://localhost:3001/sse).
2. Dans votre outil IA, IDE ou assistant (comme VS Code avec le mode Agent), assurez-vous que le serveur MCP est correctement configuré en tant que fournisseur d'outils externe.
3. Utilisez les commandes disponibles pour :
   • Lister tous les composants UI shadcn/ui
   • Récupérer le code source de n'importe quel composant (par exemple, button, accordion)
   • Récupérer le code de démonstration et des exemples d'utilisation pour les composants
   • Générer des scripts d'installation spécifiques au gestionnaire de paquets
   • Demander des guides d'installation spécifiques aux frameworks
4. Testez directement les points de terminaison API (pour les développeurs) en utilisant curl, un navigateur ou l'interface utilisateur Inspecteur pour vérifier la fonctionnalité.
5. Analysez les réponses et intégrez les résultats dans votre flux de travail de codage ou votre processus de développement piloté par IA.

Caractéristiques principales

• Accès direct au dernier code source des composants shadcn/ui depuis le dépôt GitHub officiel.
• Récupération à la demande de code de démonstration et d'exemples pratiques d'utilisation des composants pour un prototypage rapide.
• Génération d'instructions d'installation adaptées à votre gestionnaire de paquets préféré (npm, yarn, pnpm, bun).
• Guides d'installation spécifiques aux frameworks pour les environnements pris en charge (Next.js, Vite, Remix, et autres).
• Serveur MCP facile à utiliser avec gestion des erreurs selon les meilleures pratiques et extensibilité pour ajouter de nouveaux outils ou ressources.
• Intégration transparente avec des outils de développement et des assistants IA, y compris le mode Agent de VS Code.

Cas d'utilisation

• Assistants de codage IA : Alimentation d'outils IA ou de chatbots qui aident les développeurs à explorer, insérer ou modifier des composants shadcn/ui dans leur code.
• Intégration IDE : Activation de flux de travail en éditeur pour récupérer le code source ou des démonstrations des composants et générer des scripts d'installation à la volée.
• Configuration de projet automatisée : Permettre à des bots ou des scripts de préparer de manière programmatique les étapes d'installation pour des frameworks et des gestionnaires de paquets spécifiques.
• Outils d'apprentissage des développeurs : Fournir des extraits de code et des guides à jour pour des applications éducatives ou des générateurs de documentation.
• Refactoring de code piloté par l'IA : Assister dans les mises à jour de composants ou les tâches de migration en fournissant un code source de composants toujours à jour.

FAQ

Q1 : Comment le serveur trouve-t-il la dernière version des composants ?
Le serveur récupère les informations sur les composants directement depuis le dépôt GitHub de shadcn/ui, en utilisant diverses stratégies de recherche pour s'adapter à la façon dont les composants sont stockés ou nommés.

Q2 : Que dois-je faire si un nom de composant n'est pas trouvé ou renvoie une erreur ?
Vérifiez le nom du composant tel qu'il apparaît dans la bibliothèque officielle de shadcn/ui. Si cela échoue encore, vérifiez la structure du dépôt shadcn/ui ou recherchez tout renommage ou dépréciation récent.

Q3 : Puis-je étendre le serveur pour ajouter de nouveaux outils ou ressources ?
Oui, le serveur est conçu pour être extensible. Vous pouvez ajouter de nouveaux outils dans tools.ts, des ressources dans resources.ts, et des modèles de ressources dans resource-templates.ts.

Q4 : Ce serveur est-il prêt pour la production ?
Bien que robuste, ce projet est principalement conçu pour le développement local, l'expérimentation et l'intégration d'assistants. Si vous le déployez en production, révisitez et renforcez sa sécurité et sa gestion des erreurs.

Q5 : Comment déboguer les problèmes avec le serveur ou son intégration ?
Utilisez l'Inspecteur MCP à http://127.0.0.1:6274, surveillez les journaux de la console et assurez-vous d'avoir un accès réseau correct à la fois pour votre environnement de développement et le dépôt GitHub de shadcn/ui.