MCP-сервер

mdui предоставляет специализированный MCP-сервер (Model Context Protocol) @mdui/mcp, позволяющий AI-агентам запрашивать информацию о компонентах, иконках, пользовательских CSS-свойствах и документации локально.

Он может использоваться с такими инструментами разработки, как Claude Code, Cursor, GitHub Copilot, для помощи в генерации кода и более эффективного использования компонентов и стилей mdui.

Инструменты

MCP-сервер mdui предоставляет AI-агентам следующие инструменты:

• list_components: Получить список всех компонентов mdui.
• get_component_metadata: Получить подробные метаданные API одного компонента.
• list_css_classes: Получить список глобальных CSS-классов.
• list_css_variables: Получить список глобальных пользовательских CSS-свойств.
• list_documents: Получить список всех документов.
• get_document: Получить полное содержимое одного документа.
• list_icon_codes: Получить список кодов иконок, которые можно использовать в атрибутах или API.
• list_icon_components: Получить список автономных компонентов иконок и их импорты в формате ESM.

Использование

MCP-сервер поддерживает только транспорт stdio. Его можно использовать напрямую в клиентах, таких как VS Code, Cursor, Claude Code, Windsurf, Zed, а также в AI-агентах, поддерживающих протокол stdio.

VS Code

Убедитесь, что установлены расширения GitHub Copilot и GitHub Copilot Chat.

1. Создайте .vscode/mcp.json в корне проекта и добавьте следующую конфигурацию:

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

2. Нажмите кнопку "Запустить" в файле mcp.json.

3. Начните разговор в GitHub Copilot Chat.

Cursor

1. Создайте или отредактируйте .cursor/mcp.json в корне проекта, добавьте следующую конфигурацию:

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

2. Перейдите в Settings > Cursor Settings > MCP & Integrations, включите сервер mdui.

3. Начните разговор в Cursor Chat.

Claude Code

1. Выполните в терминале следующую команду для добавления MCP-сервера mdui:

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

2. Затем выполните claude для запуска сессии.

3. Начните вводить запросы для работы.

Windsurf

1. Перейдите в Settings > Windsurf Settings > Cascade

2. Нажмите Manage MCPs, затем "View raw config", добавьте в файл конфигурации:

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

   Если MCP-сервер не появился автоматически, нажмите «Refresh», чтобы обновить список.

3. Начните разговор.

Zed

1. Откройте Settings > Open Settings, добавьте следующую конфигурацию в файл settings.json:

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

2. Начните работу.

Пользовательский MCP-клиент

При использовании пользовательского MCP-клиента в локальной среде или среде разработки добавьте этот сервер в файл конфигурации клиента. Например:

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