MCP Server

mdui ofrece un servidor MCP (Model Context Protocol) dedicado, @mdui/mcp, para consultar componentes, iconos, propiedades CSS personalizadas y documentación desde agentes de IA en local.

Funciona con herramientas de desarrollo como Claude Code, Cursor y GitHub Copilot para facilitar la generación de código y aprovechar mejor los componentes y estilos de mdui.

Herramientas

El servidor MCP de mdui expone las siguientes herramientas a los agentes de IA:

• list_components: Lista todos los componentes de mdui.
• get_component_metadata: Obtiene los metadatos detallados de la API de un solo componente.
• list_css_classes: Lista los nombres de clases CSS globales.
• list_css_variables: Lista las propiedades personalizadas CSS globales.
• list_documents: Lista todos los documentos.
• get_document: Obtiene el contenido completo de un solo documento.
• list_icon_codes: Lista los códigos de iconos disponibles para usar en atributos o API.
• list_icon_components: Lista los componentes de iconos independientes y sus declaraciones de importación ESM.

Uso

El servidor MCP solo admite transporte stdio y puede usarse directamente en clientes como VS Code, Cursor, Claude Code, Windsurf, Zed, y en agentes de IA que admitan el protocolo stdio.

VS Code

Asegúrate de tener instaladas las extensiones GitHub Copilot y GitHub Copilot Chat.

1. Crea el directorio .vscode en la raíz del proyecto y dentro crea el archivo mcp.json, añadiendo la siguiente configuración:

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

2. Haz clic en el botón "Iniciar" dentro del archivo mcp.json.

3. Comienza a conversar en GitHub Copilot Chat.

Cursor

1. Crea o edita .cursor/mcp.json en la raíz del proyecto, añadiendo la siguiente configuración:

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

2. Ve a Settings > Cursor Settings > MCP & Integrations, y habilita el servidor mdui.

3. Comienza a conversar en Cursor Chat.

Claude Code

1. Ejecuta el siguiente comando en la terminal para añadir el servidor MCP de mdui:

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

2. Luego ejecuta claude para iniciar la sesión.

3. Escribe un mensaje para comenzar a usarlo.

Windsurf

1. Ve a Settings > Windsurf Settings > Cascade

2. Haz clic en Manage MCPs, luego en "View raw config", y añade la siguiente configuración al archivo:

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

   Si el servidor MCP no aparece automáticamente, puedes hacer clic en Refresh para actualizar la lista.

3. Comienza a conversar.

Zed

1. Abre Settings > Open Settings, y añade la siguiente configuración al archivo settings.json:

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

2. Comienza a usarlo.

Cliente MCP personalizado

Cuando uses un cliente MCP personalizado en un entorno local o de desarrollo, añade el servidor al archivo de configuración del cliente. Por ejemplo:

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