MCP-Server

mdui bietet einen dedizierten MCP (Model Context Protocol)-Server @mdui/mcp an, um KI-Agenten lokal Abfragefähigkeiten für Komponenten, Symbole, CSS Custom Properties und Dokumentation bereitzustellen.

Er kann mit Entwicklungswerkzeugen wie Claude Code, Cursor und GitHub Copilot zusammenarbeiten, um die Codegenerierung zu unterstützen und die Verwendung von mdui-Komponenten und -Stilen zu verbessern.

Werkzeuge

Der MCP-Server von mdui stellt KI-Agenten die folgenden Werkzeuge zur Verfügung:

• list_components: Listet alle mdui-Komponenten auf.
• get_component_metadata: Ruft detaillierte API-Metadaten für eine einzelne Komponente ab.
• list_css_classes: Listet globale CSS-Klassennamen auf.
• list_css_variables: Listet globale CSS Custom Properties auf.
• list_documents: Listet alle Dokumente auf.
• get_document: Ruft den vollständigen Inhalt eines einzelnen Dokuments ab.
• list_icon_codes: Listet Symbolcodes auf, die für Attribute oder APIs verwendet werden können.
• list_icon_components: Listet eigenständige Symbolkomponenten und ihre ESM-Importanweisungen auf.

Verwendung

Der MCP-Server unterstützt nur die stdio-Übertragung und kann direkt in Clients wie VS Code, Cursor, Claude Code, Windsurf, Zed sowie in KI-Agenten, die das stdio-Protokoll unterstützen, verwendet werden.

VS Code

Stellen Sie sicher, dass die Erweiterungen GitHub Copilot und GitHub Copilot Chat installiert sind.

1. Erstellen Sie die Datei .vscode/mcp.json im Stammverzeichnis Ihres Projekts und fügen Sie die folgende Konfiguration hinzu:

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

2. Klicken Sie auf die Schaltfläche "Start" in der Datei mcp.json.

3. Beginnen Sie den Dialog in GitHub Copilot Chat.

Cursor

1. Erstellen oder bearbeiten Sie die Datei .cursor/mcp.json im Stammverzeichnis Ihres Projekts und fügen Sie die folgende Konfiguration hinzu:

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

2. Gehen Sie zu Settings > Cursor Settings > MCP & Integrations und aktivieren Sie den mdui-Server.

3. Beginnen Sie den Dialog in Cursor Chat.

Claude Code

1. Führen Sie den folgenden Befehl im Terminal aus, um den mdui MCP-Server hinzuzufügen:

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

2. Führen Sie anschließend claude aus, um eine Sitzung zu starten.

3. Beginnen Sie mit der Eingabe von Prompts.

Windsurf

1. Gehen Sie zu Settings > Windsurf Settings > Cascade

2. Klicken Sie auf Manage MCPs und dann auf "View raw config". Fügen Sie der Konfigurationsdatei Folgendes hinzu:

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

   Wenn der MCP-Server nicht automatisch angezeigt wird, klicken Sie auf Refresh, um die Liste zu aktualisieren.

3. Beginnen Sie mit der Eingabe von Prompts.

Zed

1. Öffnen Sie Settings > Open Settings und fügen Sie die folgende Konfiguration zur Datei settings.json hinzu:

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

2. Beginnen Sie mit der Eingabe von Prompts.

Benutzerdefinierter MCP-Client

Wenn Sie einen benutzerdefinierten MCP-Client in einer lokalen oder Entwicklungsumgebung verwenden, fügen Sie diesen Server einfach zur Konfigurationsdatei des Clients hinzu. Beispiel:

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