MCP 伺服器

mdui 提供專用的 MCP（Model Context Protocol） 伺服器 @mdui/mcp，可在本地提供 AI 代理查詢元件、圖示、CSS 自訂屬性及文件的能力。

它可與 Claude Code、Cursor、GitHub Copilot 等開發工具搭配，輔助產生程式碼，並更好地運用 mdui 的元件與樣式。

工具

mdui 的 MCP 伺服器向 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 等客戶端，以及支援 stdio 協定的 AI 代理中直接使用。

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. 在終端機中執行以下指令來新增 mdui MCP 伺服器：

   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"]
    }
  }
}