MCP server

mdui poskytuje vyhrazený MCP (Model Context Protocol) server @mdui/mcp pro poskytování schopností dotazování na komponenty, ikony, CSS vlastní vlastnosti a dokumentaci pro AI agenty lokálně.

Lze jej použít ve spojení s vývojovými nástroji jako Claude Code, Cursor, GitHub Copilot pro usnadnění generování kódu a lepší využití komponent a stylů mdui.

Nástroje

MCP server mdui vystavuje AI agentům následující nástroje:

• list_components: Vypíše všechny komponenty mdui.
• get_component_metadata: Získá podrobná metadata API pro jednu komponentu.
• list_css_classes: Vypíše globální názvy CSS tříd.
• list_css_variables: Vypíše globální CSS vlastní vlastnosti.
• list_documents: Vypíše všechny dokumenty.
• get_document: Získá úplný obsah jednoho dokumentu.
• list_icon_codes: Vypíše kódy ikon použitelné v atributech nebo API.
• list_icon_components: Vypíše samostatné komponenty ikon a jejich příkazy pro import ESM.

Způsob použití

MCP server podporuje pouze stdio přenos a lze jej přímo používat v klientech jako VS Code, Cursor, Claude Code, Windsurf, Zed a v AI agentech podporujících stdio protokol.

VS Code

Ujistěte se, že máte nainstalovaná rozšíření GitHub Copilot a GitHub Copilot Chat.

1. V kořeni projektu vytvořte .vscode/mcp.json a přidejte následující konfiguraci:

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

2. Klikněte na tlačítko "Spustit" v souboru mcp.json.

3. Začněte konverzaci v GitHub Copilot Chat.

Cursor

1. V kořenovém adresáři projektu vytvořte nebo upravte .cursor/mcp.json a přidejte následující konfiguraci:

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

2. Přejděte do Settings > Cursor Settings > MCP & Integrations a povolte server mdui.

3. Začněte konverzaci v Cursor Chat.

Claude Code

1. V terminálu spusťte následující příkaz pro přidání MCP serveru mdui:

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

2. Poté spusťte claude pro zahájení relace.

3. Zadejte výzvu a začněte používat.

Windsurf

1. Přejděte do Settings > Windsurf Settings > Cascade

2. Klikněte na Manage MCPs, poté na "View raw config" a do konfiguračního souboru přidejte:

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

   Pokud se MCP server neobjeví automaticky, klikněte na Refresh pro obnovení seznamu.

3. Zadejte výzvu a začněte konverzaci.

Zed

1. Otevřete Settings > Open Settings a do souboru settings.json přidejte následující konfiguraci:

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

2. Zadejte výzvu a začněte používat.

Vlastní MCP klient

Při použití vlastního MCP klienta v místním nebo vývojovém prostředí jednoduše přidejte tento server do konfiguračního souboru klienta. Například:

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