Heroui MCP Cloudflare

HeroUI MCP 服务器

一个提供全面访问的模型上下文协议（MCP）服务器 HeroUI（注：这可能是一个特定应用或界面的名称，直接翻译为“英雄用户界面”或保持原样作为专有名词） 组件库文档。部署此MCP（多组件平台/中间件组件包）以帮助像Claude Code这样的AI助手使用HeroUI组件构建一致且设计良好的React应用程序。

🚀 快速部署


这将把您的HeroUI MCP服务器部署到一个类似如下的URL： heroui-mcp..workers.dev/sse

📋 该MCP（可能指某种计划、课程或认证等，具体需根据上下文确定）提供什么

这款MCP服务器为AI助手提供了即时访问HeroUI的50多个React组件的功能，配备了7种专业工具：

可用工具

1. list_components - 浏览所有50个可用的HeroUI组件
2. get_component_info - 获取组件详情、导入方式和基本用法
3. get_component_api 查看完整的API参考，包括属性和类型
4. get_component_slots - 探索基于插槽的自定义选项
5. get_variants_guide - 学习 extendVariants 定制化系统
6. search_components - 根据使用场景查找组件（表单、导航、覆盖层等）
7. get_theme_info - HeroUI 主题系统及配置指南

组件类别

• 表单输入框、文本域、选择框、复选框、单选按钮、开关、滑块、日期选择器
• 导航导航栏，面包屑导航，选项卡，链接
• 布局卡片（Card）、分隔符（Divider）、间隔符（Spacer）、可折叠面板（Accordion）
• 数据显示表格、列表框、分页、头像、用户、徽章
• 反馈警告、吐司（信息提示）、进度条、旋转加载器、骨架屏
• 覆盖层；叠加层模态框（Modal）、抽屉（Drawer）、气泡菜单（Popover）、工具提示（Tooltip）、下拉菜单（Dropdown）
• 媒体图像，化身
• 以及更多总计50多个组件

🔌 安装

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

立即使用公共的HeroUI MCP服务器开始：

克劳德密码：

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

光标：

在 Cursor 中安装：

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

cursor://anysphere.cursor-deeplink/mcp/install?name=heroui&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJtY3AtcmVtb3RlIiwiaHR0cHM6Ly9oZXJvdWktbWNwLWNsb3VkZmxhcmUuamdlbnRlcy53b3JrZXJzLmRldi9zc2UiXX0=

或者手动添加到您的 Cursor 设置中：

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

选项2：部署您自己的（系统/服务）

在Cloudflare Workers上部署您自己的实例：

1. 点击顶部的“部署到Cloudflare Workers”按钮
2. 部署完成后，您的MCP将可通过以下地址访问： https://heroui-mcp-cloudflare..workers.dev/sse
3. 连接到Claude代码：

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

或者手动编辑您的配置：

{
  "mcpServers": {
    "heroui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://heroui-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 heroui npx mcp-remote http://localhost:8787/sse

手动配置：

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

🛠️ 工作原理

这个MCP服务器直接从（某个来源）获取文档 heroui.com（该网址本身无直接中文含义，可保持原样或根据上下文意译为“赫鲁伊网站”等，但通常网址不直接翻译） 并为人工智能助手提供结构化信息。它有助于确保：

• ✅ 一致性 - 在各个项目中正确使用HeroUI组件
• ✅ 翻译成中文是：✓（对号，表示正确或确认） 效率 - 快速组件发现避免了不必要的定制开发
• ✅ 准确性 - 直接访问官方文档确保正确实施
• ✅ 定制化 - 完全支持HeroUI的插槽和变体系统
• ✅ 最佳实践 - 包含无障碍指南和正确使用模式

📚 示例用法

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

• “列出所有可用的HeroUI组件”
• “向我展示如何使用按钮组件”
• “Card 组件有哪些插槽？”
• “查找用于构建表单的组件”
• “如何在HeroUI中自定义变体？”

MCP 将提供来自官方 HeroUI 文档的准确、最新信息。

🔧 定制化

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

• 更新组件列表中的内容 COMPONENTS 常数
• 使用以下方式添加新工具 this.server.tool(...)
• 修改搜索类别中的 COMPONENT_MAP
• 在（某处）添加更多槽定义 SLOTS_INFO

📦 版本控制与发布

这个项目使用 发布它 使用传统的版本日志进行版本控制。

对于维护者

创建新版本：

npm run release

这将会：

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

提交信息格式

使用 约定提交（或：规范提交） 自动生成变更日志的格式：

• feat: add new component tool - 新功能（小版本更新）
• fix: correct slot parsing - 修复漏洞（补丁版本升级）
• docs: update installation guide - 文档变更
• chore: update dependencies - 维护任务
• BREAKING CHANGE: 在提交信息中 - 突破性更改（主版本号升级）

看 CHANGELOG.md 翻译成中文是：“变更日志文件.md” 用于查看发布历史。

📄 许可证

麻省理工学院（MIT）

🙏 致谢

• 构建于 Cloudflare Workers（云网关工作者）
• 来自……的文件资料 HeroUI（英雄用户界面）
• 实现了 模型上下文协议