Serveur MCP

mdui fournit un serveur MCP (Model Context Protocol) dédié, @mdui/mcp, qui permet aux agents IA locaux d'interroger les composants, les icônes, les propriétés CSS personnalisées et la documentation.

Il peut être utilisé avec des outils de développement comme Claude Code, Cursor, GitHub Copilot, etc., pour faciliter la génération de code et l'exploitation des composants et styles de mdui.

Outils

Le serveur MCP de mdui met à disposition des agents IA les outils suivants :

• list_components : Liste tous les composants mdui.
• get_component_metadata : Récupère les métadonnées détaillées de l'API d'un composant.
• list_css_classes : Liste les noms des classes CSS globales.
• list_css_variables : Liste les propriétés CSS personnalisées globales.
• list_documents : Liste tous les documents.
• get_document : Récupère le contenu complet d'un document.
• list_icon_codes : Liste les codes d'icônes utilisables dans les attributs ou l'API.
• list_icon_components : Liste les composants d'icônes indépendants et leurs instructions d'importation ESM.

Utilisation

Le serveur MCP ne prend en charge que le transport via stdio. Il peut être intégré directement aux clients comme VS Code, Cursor, Claude Code, Windsurf, Zed, ainsi que dans les agents IA prenant en charge le protocole stdio.

VS Code

Assurez-vous d'avoir installé les extensions GitHub Copilot et GitHub Copilot Chat.

1. Créez un fichier .vscode/mcp.json à la racine du projet et ajoutez la configuration suivante :

   {
     "servers": {
       "mdui": {
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. Cliquez sur le bouton "Démarrer" dans le fichier mcp.json.

3. Démarrez une conversation dans GitHub Copilot Chat.

Cursor

1. Créez ou modifiez le fichier .cursor/mcp.json à la racine du projet et ajoutez la configuration suivante :

   {
     "mcpServers": {
       "mdui": {
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. Allez dans Settings > Cursor Settings > MCP & Integrations et activez le serveur mdui.

3. Démarrez une conversation dans Cursor Chat.

Claude Code

1. Exécutez la commande suivante dans le terminal pour ajouter le serveur MCP mdui :

   claude mcp add mdui -- npx -y @mdui/mcp
   

2. Exécutez ensuite claude pour démarrer une session.

3. Saisissez votre requête pour démarrer la conversation.

Windsurf

1. Allez dans Settings > Windsurf Settings > Cascade

2. Cliquez sur Manage MCPs, puis sur "View raw config", et ajoutez ceci au fichier de configuration :

   {
     "mcpServers": {
       "mdui": {
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

   Si le serveur MCP n'apparaît pas automatiquement, cliquez sur Refresh pour rafraîchir la liste.

3. Saisissez votre requête pour démarrer la conversation.

Zed

1. Ouvrez Settings > Open Settings et ajoutez la configuration suivante dans le fichier settings.json :

   {
     "context_servers": {
       "mdui": {
         "source": "custom",
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. Saisissez votre requête pour démarrer la conversation.

Client MCP personnalisé

Si vous utilisez un client MCP personnalisé en local ou dans un environnement de développement, ajoutez simplement ce serveur au fichier de configuration du client. Par exemple :

{
  "mcpServers": {
    "mdui": {
      "command": "npx",
      "args": ["-y", "@mdui/mcp"]
    }
  }
}