Mui MCP Cloudflare

物料UI MCP服务器

模型上下文协议（MCP）服务器提供对 材质UI 组件库文档。部署此MCP以帮助像Claude Code这样的AI助手使用Material UI组件构建一致、设计良好的React应用程序。

🚀 快速部署


这将把您的Material UI MCP服务器部署到以下URL： mui-mcp..workers.dev/sse

📋 此MCP提供什么

此MCP服务器使AI助手能够使用6个专用工具即时访问Material UI的50多个React组件：

可用工具

1. list_components -浏览所有50+可用的Material UI组件
2. get_component_info -获取组件详细信息、导入和文档链接
3. search_components -按用例查找组件（表单、导航、反馈等）
4. get_customization_guide -学习Material UI的主题和样式系统
5. get_setup_guide -Material UI的安装和设置说明
6. get_mui_guide -Material UI文档和最佳实践综合指南

组件类别

• 输入：文本字段、选择、复选框、单选按钮、开关、滑块、自动补全
• 数据显示：表格、列表、排版、头像、徽章、芯片、工具提示、时间线
• 反馈：警报、对话、进度、Snackbar、骨架、回退
• 表面：卡片、纸张、手风琴
• 导航：应用栏、抽屉、标签页、面包屑、菜单、步进器、底部导航
• 布局：盒子、容器、网格、堆栈、图像列表、砌体
• 工具集：单击离开侦听器、CSS基线、门户
• 还有更多：50+生产就绪组件

🔌 安装

选项1：快速入门（如果您不想部署到Cloudflare或在本地运行自己的）

使用公共Material UI MCP服务器立即开始：

克劳德代码：

claude mcp add mui npx mcp-remote https://mui-mcp-cloudflare.jgentes.workers.dev/sse

光标：

在游标中安装：

要在Cursor中安装Material UI MCP服务器，请将以下链接复制并粘贴到浏览器的地址栏中：

cursor://anysphere.cursor-deeplink/mcp/install?name=mui&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJtY3AtcmVtb3RlIiwiaHR0cHM6Ly9tdWktbWNwLWNsb3VkZmxhcmUuamdlbnRlcy53b3JrZXJzLmRldi9zc2UiXX0=

或者手动添加到光标设置中：

{
  "mcpServers": {
    "mui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mui-mcp-cloudflare.jgentes.workers.dev/sse"
      ]
    }
  }
}

选项2：部署自己的

将您自己的实例部署到Cloudflare Workers：

1. 点击顶部的“部署到Cloudflare Workers”按钮
2. 部署后，您的MCP将在以下位置可用： https://mui-mcp-cloudflare..workers.dev/sse
3. 连接到克劳德代码：

claude mcp add mui npx mcp-remote https://mui-mcp-cloudflare..workers.dev/sse

或者手动编辑您的配置：

{
  "mcpServers": {
    "mui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mui-mcp-cloudflare..workers.dev/sse"
      ]
    }
  }
}

选项3：本地服务器

要使用Wrangler CLI运行：

# Install dependencies
npm install

# Run locally (starts on http://localhost:8787)
npm run dev

连接到本地实例：

克劳德代码：

claude mcp add mui npx mcp-remote http://localhost:8787/sse

手动配置：

{
  "mcpServers": {
    "mui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://localhost:8787/sse"
      ]
    }
  }
}

🛠️ 运作原理

此MCP服务器直接从以下位置获取文档 mui.com 并向AI助手提供结构化信息。它有助于确保：

• ✅ 一致性 -跨项目正确使用Material UI组件
• ✅ 效率 -快速组件发现可防止不必要的自定义开发
• ✅ 准确度 -直接获取官方文件可确保正确实施
• ✅ 定制 -完全支持Material UI的主题和样式系统
• ✅ 最佳实践 -包括可访问性指南和正确的使用模式

📚 示例用法

当连接到Claude Code时，您可以提出以下问题：

• “列出所有可用的材质UI组件”
• “演示如何使用按钮组件”
• “查找建筑模板的组件”
• “如何设置材质UI主题？”
• “自定义材质UI组件的最佳方法是什么？”
• “显示数据显示组件”

MCP将提供准确、最新的信息，并直接链接到官方材料UI文档。

🔧 定制

要修改MCP服务器，请编辑 src/index.ts:

• 更新中的组件列表 COMPONENTS 恒定
• 使用添加新工具 this.server.tool(...)
• 修改搜索类别 COMPONENT_MAP
• 增强文档提取方法

📦 版本控制和发布

此项目使用 释放它 使用传统的变更日志进行版本控制。

对于维护人员

要创建新版本，请执行以下操作：

npm run release

这将：

1. 提示您选择版本升级（补丁/次要/主要）
2. 更新package.json版本
3. 根据提交消息生成/更新CHANGELOG.md
4. 创建一个git标签
5. 将更改推送到GitHub
6. 创建GitHub版本

提交消息格式

使用 约定式提交 自动生成变更日志的格式：

• feat: add new component tool -新功能（小版本凹凸）
• fix: correct component URL -Bug修复（补丁版本碰撞）
• docs: update installation guide -文档更改
• chore: update dependencies -维护任务
• BREAKING CHANGE: in commit body-突破性更改（主要版本碰撞）

看 更改日志.md 发布历史。

📄 许可证

麻省理工学院

🙏 鸣谢

• 内置于 Cloudflare员工
• 文档来源 材质UI
• 实施 模型上下文协议