MCP-szerver

Az mdui egy dedikált MCP (Model Context Protocol) szervert biztosít @mdui/mcp néven, amely helyben teszi lehetővé az AI-ügynökök számára a komponensek, ikonok, CSS egyéni tulajdonságok és dokumentáció lekérdezését.

Együttműködik olyan fejlesztőeszközökkel, mint a Claude Code, a Cursor és a GitHub Copilot, hogy segítse a kódgenerálást, valamint az mdui komponensek és stílusok hatékonyabb használatát.

Eszközök

Az mdui MCP-szerver a következő eszközöket teszi elérhetővé az AI-ügynökök számára:

• list_components: Kilistázza az összes mdui komponenst.
• get_component_metadata: Lekéri egy adott komponens részletes API-metaadatait.
• list_css_classes: Kilistázza a globális CSS osztályneveket.
• list_css_variables: Kilistázza a globális CSS egyéni tulajdonságokat.
• list_documents: Kilistázza az összes dokumentumot.
• get_document: Lekéri egy adott dokumentum teljes tartalmát.
• list_icon_codes: Kilistázza az attribútumokban vagy API-kban használható ikonkódokat.
• list_icon_components: Kilistázza az önálló ikonkomponenseket és azok ESM importálási módját.

Használat

Az MCP-szerver csak stdio átvitelt támogat, így közvetlenül használható olyan kliensekben, mint a VS Code, Cursor, Claude Code, Windsurf, Zed, valamint minden stdio protokollt támogató AI-ügynökben.

VS Code

Győződjön meg róla, hogy telepítve van a GitHub Copilot és a GitHub Copilot Chat kiterjesztés.

1. Hozzon létre egy .vscode/mcp.json fájlt a projekt gyökérkönyvtárában az alábbi tartalommal:

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

2. Kattintson az „Indítás” gombra az mcp.json fájlban.

3. Kezdjen beszélgetést a GitHub Copilot Chatben.

Cursor

1. Hozzon létre vagy szerkesszen egy .cursor/mcp.json fájlt a projekt gyökérkönyvtárában az alábbi tartalommal:

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

2. Lépjen a Beállítások > Cursor Beállítások > MCP és Integrációk menüpontba, és engedélyezze az mdui szervert.

3. Kezdjen beszélgetést a Cursor Chatben.

Claude Code

1. Futtassa a következő parancsot a terminálban az mdui MCP-szerver hozzáadásához:

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

2. Ezután futtassa a claude parancsot a munkamenet elindításához.

3. Adja meg a kérését a használat megkezdéséhez.

Windsurf

1. Lépjen a Beállítások > Windsurf Beállítások > Cascade menüpontba.

2. Kattintson az „MCP-k kezelése”, majd a „Nyers konfiguráció megtekintése” gombra, és adja hozzá ezt a konfigurációs fájlhoz:

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

   Ha az MCP-szerver nem jelenik meg automatikusan, kattintson a Frissítés gombra a lista frissítéséhez.

3. Adja meg a kérését a beszélgetés megkezdéséhez.

Zed

1. Nyissa meg a Beállítások > Beállítások megnyitása menüpontot, és adja hozzá a következő konfigurációt a settings.json fájlhoz:

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

2. Adja meg a kérését a használat megkezdéséhez.

Egyéni MCP kliens

Ha egyéni MCP-klienst használ helyileg vagy fejlesztői környezetben, adja hozzá a szervert a kliens konfigurációs fájljához. Például:

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