MCP Modus

🚀 MCP Modus

Modus Web組件的AI助手 - 直接在你的集成開發環境（IDE）中，即時獲取組件文檔、設計規則和設置指南相關的幫助。

🚀 快速開始

本MCP服務器允許AI助手（如Cursor、Claude、VS Code）訪問完整的Modus Web組件文檔。你可以提出如下問題：

• “如何使用原色的Modus按鈕？”
• “Modus的顏色指南是什麼？”
• “展示如何使用Modus組件設置一個React項目”
• “哪些組件具有禁用屬性？”

📦 安裝指南

你可以從以下兩種安裝方式中任選其一：

選項1：NPX（推薦 - 無需安裝）

適用於任何支持MCP的IDE：

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

優點：無需安裝，始終使用最新版本，無權限問題。

選項2：全局安裝

1. 全局安裝：

npm install -g @julianoczkowski/mcp-modus

注意：在某些系統上，你可能需要使用 sudo npm install -g @julianoczkowski/mcp-modus

2. 使用以下配置：

{
  "mcpServers": {
    "modus-docs": {
      "command": "mcp-modus"
    }
  }
}

優點：啟動速度更快，安裝後可離線使用。

📚 詳細文檔

特定IDE的設置說明

對於Cursor IDE

1. 轉到 設置 → 功能 → MCP
2. 點擊“添加新的MCP服務器”
3. 使用上述JSON配置之一

對於VS Code（搭配Continue）

使用上述JSON配置之一添加到 ~/.continue/config.json。

對於Claude桌面版

使用上述JSON配置之一添加到你的配置文件：

• macOS：~/Library/Application Support/Claude/claude_desktop_config.json
• Windows：%APPDATA%/Claude/claude_desktop_config.json

你將獲得的內容

📚 組件文檔（43 + 個組件）

• 所有Modus Web組件的完整API文檔
• 使用示例和最佳實踐
• 屬性和事件參考

🎨 設計系統指南

• 調色板和使用規則
• 圖標指南和可用圖標
• 間距、排版和佈局系統
• 邊框半徑和邊框指南

⚙️ 項目設置指南

• HTML項目設置說明
• React項目集成指南
• 主題實現和定製
• 測試指南和最佳實踐

💻 使用示例

配置完成後，你可以向AI助手提問，如：

"創建一個帶有警告顏色和中等大小的Modus按鈕"
"在我的Modus設計中應該使用哪些間距值？"
"如何使用Modus Web組件設置一個新的React項目？"
"展示所有Modus表單組件"
"可用的Modus顏色令牌有哪些？"

AI將使用MCP服務器獲取最新文檔，並提供準確、最新的答案。

🔧 技術細節

故障排除

服務器無法連接

• 確保已安裝Node.js 18 +：node --version
• 對於全局安裝：使用 mcp-modus --help 進行驗證
• 檢查IDE日誌中的錯誤消息

刪除下載的文檔

如果你使用的是 NPX選項（選項1），文檔由NPX臨時緩存。要清除此緩存：

# 清除此包的NPX緩存
npx clear-npx-cache @julianoczkowski/mcp-modus

# 或者清除整個NPX緩存
npm cache clean --force

如果你使用的是 全局安裝選項（選項2），請使用以下命令卸載：

npm uninstall -g @julianoczkowski/mcp-modus

需要幫助？

• GitHub問題
• Modus Web組件文檔

為使用Modus Web組件的開發者打造 | MIT許可證 | 由Julian Oczkowski創建