Servidor MCP

O mdui oferece um servidor MCP (Model Context Protocol) dedicado, @mdui/mcp, que fornece localmente recursos de consulta para componentes, ícones, propriedades CSS personalizadas e documentação para agentes de IA.

Ele pode ser usado com ferramentas de desenvolvimento como Claude Code, Cursor, GitHub Copilot para ajudar na geração de código e melhorar o uso dos componentes e estilos do mdui.

Ferramentas

O servidor MCP do mdui oferece as seguintes ferramentas para o agente de IA:

• list_components: Lista todos os componentes do mdui.
• get_component_metadata: Obtém metadados detalhados da API de um componente específico.
• list_css_classes: Lista nomes de classes CSS globais.
• list_css_variables: Lista propriedades CSS personalizadas globais.
• list_documents: Lista todos os documentos.
• get_document: Obtém o conteúdo completo de um documento específico.
• list_icon_codes: Lista códigos de ícones que podem ser usados em atributos ou APIs.
• list_icon_components: Lista componentes de ícone independentes e suas declarações de importação ESM.

Como usar

O servidor MCP oferece suporte apenas para transporte stdio e pode ser usado diretamente em clientes como VS Code, Cursor, Claude Code, Windsurf, Zed, além de outros agentes de IA que suportam o protocolo stdio.

VS Code

Certifique-se de ter instalado as extensões GitHub Copilot e GitHub Copilot Chat.

1. Crie o diretório .vscode na raiz do projeto e, dentro dele, o arquivo mcp.json com a seguinte configuração:

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

2. Clique no botão “Iniciar” no arquivo mcp.json.

3. Comece a conversar no GitHub Copilot Chat.

Cursor

1. Crie ou edite o arquivo .cursor/mcp.json na raiz do projeto com a seguinte configuração:

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

2. Acesse Configurações > Configurações do Cursor > MCP & Integrations e ative o servidor mdui.

3. Comece a conversar no Cursor Chat.

Claude Code

1. Execute o seguinte comando no terminal para adicionar o servidor MCP mdui:

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

2. Em seguida, execute claude para iniciar a sessão.

3. Digite o prompt para começar a usar.

Windsurf

1. Acesse Configurações > Configurações do Windsurf > Cascade

2. Clique em Gerenciar MCPs e depois em “Ver configuração bruta”. Adicione ao arquivo de configuração:

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

   Se o servidor MCP não aparecer automaticamente, clique em Atualizar para atualizar a lista.

3. Digite o prompt para começar a conversar.

Zed

1. Abra Configurações > Abrir Configurações e adicione a seguinte configuração ao arquivo settings.json:

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

2. Digite o prompt para começar a usar.

Cliente MCP personalizado

Ao usar um cliente MCP personalizado no ambiente local ou de desenvolvimento, adicione o servidor ao arquivo de configuração do cliente. Exemplos:

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