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创建