Serwer MCP

mdui dostarcza dedykowany serwer MCP (Model Context Protocol) @mdui/mcp, który zapewnia asystentom AI działającym lokalnie możliwość wyszukiwania komponentów, ikon, niestandardowych właściwości CSS i dokumentacji.

Możesz go używać z narzędziami programistycznymi takimi jak Claude Code, Cursor, GitHub Copilot, aby wspomóc generowanie kodu i lepsze korzystanie z komponentów i stylów mdui.

Narzędzia

Serwer MCP mdui udostępnia asystentom AI następujące narzędzia:

• list_components: Wyświetla listę wszystkich komponentów mdui.
• get_component_metadata: Pobiera szczegółowe metadane API dla pojedynczego komponentu.
• list_css_classes: Wyświetla listę globalnych nazw klas CSS.
• list_css_variables: Wyświetla listę globalnych niestandardowych właściwości CSS.
• list_documents: Wyświetla listę wszystkich dokumentów.
• get_document: Pobiera pełną zawartość pojedynczego dokumentu.
• list_icon_codes: Wyświetla listę kodów ikon, których można używać w atrybutach lub API.
• list_icon_components: Wyświetla listę niezależnych komponentów ikon oraz instrukcje importu ESM.

Sposób użycia

Serwer MCP obsługuje tylko transport stdio i możesz użyć go bezpośrednio w klientach takich jak VS Code, Cursor, Claude Code, Windsurf, Zed oraz w asystentach AI obsługujących protokół stdio.

VS Code

Upewnij się, że masz zainstalowane rozszerzenia GitHub Copilot i GitHub Copilot Chat.

1. W katalogu głównym projektu utwórz .vscode/mcp.json i dodaj następującą konfigurację:

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

2. Kliknij przycisk „Uruchom” w pliku mcp.json.

3. Rozpocznij rozmowę w GitHub Copilot Chat.

Cursor

1. W katalogu głównym projektu utwórz lub edytuj .cursor/mcp.json i dodaj następującą konfigurację:

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

2. Przejdź do Settings > Cursor Settings > MCP & Integrations i włącz serwer mdui.

3. Rozpocznij rozmowę w Cursor Chat.

Claude Code

1. W terminalu uruchom następującą komendę, aby dodać serwer MCP mdui:

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

2. Następnie uruchom claude, aby rozpocząć sesję.

3. Wprowadź prompt, aby rozpocząć używanie.

Windsurf

1. Przejdź do Settings > Windsurf Settings > Cascade

2. Kliknij Manage MCPs, a następnie „View raw config” i dodaj w pliku konfiguracyjnym:

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

   Jeśli serwer MCP nie pojawi się automatycznie, kliknij Refresh, aby odświeżyć listę.

3. Wprowadź prompt, aby rozpocząć rozmowę.

Zed

1. Otwórz Settings > Open Settings i dodaj następującą konfigurację w pliku settings.json:

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

2. Wprowadź prompt, aby rozpocząć używanie.

Niestandardowy klient MCP

Gdy używasz niestandardowego klienta MCP w środowisku lokalnym lub deweloperskim, po prostu dodaj ten serwer do pliku konfiguracyjnego klienta. Na przykład:

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