HeroUI Pro MCP Server

在 AI 编辑器中直接使用 HeroUI Pro 组件，实时同步官方文档与代码。

这是什么？

HeroUI Pro MCP Server 让你在 Cursor、Claude Code 等 AI 编辑器中直接查询和使用 HeroUI Pro 组件。输入你的 Key，AI 就能获取最新的组件文档、代码示例和 API 参考。

实时同步。 官方组件更新后，MCP Server 会立即同步，你拿到的始终是最新版本。

快速开始

1. 获取 Key

如果你已经有 HeroUI Pro 的 Key，直接用就行。还没有？联系管理员获取。

2. 配置 MCP

将下面的配置添加到对应的配置文件中，将 <YOUR_KEY> 替换为你收到的 Key：

添加到 .cursor/mcp.json 或 Settings > Tools > MCP Servers：

{
  "mcpServers": {
    "heroui-pro": {
      "url": "https://hp-mcp-proxy.932324.xyz/mcp",
      "headers": {
        "x-heroui-personal-token": "<YOUR_KEY>"
      }
    }
  }
}

配置完成后，在 Settings > Tools & MCPs 中确保 heroui-pro 连接已启用。

编辑 ~/.claude/settings.json，在 mcpServers 中添加：

{
  "mcpServers": {
    "heroui-pro": {
      "url": "https://hp-mcp-proxy.932324.xyz/mcp",
      "headers": {
        "x-heroui-personal-token": "<YOUR_KEY>"
      }
    }
  }
}

在 VS Code 的 mcp.json 中添加：

{
  "servers": {
    "heroui-pro": {
      "url": "https://hp-mcp-proxy.932324.xyz/mcp",
      "headers": {
        "x-heroui-personal-token": "<YOUR_KEY>"
      }
    }
  }
}

3. 开始使用

配置完成后，在 AI 对话中直接提问即可。例如：

帮我创建一个 HeroUI Pro 的 AreaChart 组件，展示月度收入数据

AI 会自动通过 MCP 获取最新的组件文档和代码示例。

常见问题

支持哪些编辑器？

支持所有兼容 MCP 协议的编辑器和工具，包括 Cursor、Claude Code、VS Code (Copilot)、Windsurf 等。

Key 可以在多台设备上使用吗？

可以。同一个 Key 可以在多台设备、多个编辑器中同时使用。

和直接连接官方 MCP 有什么区别？

使用体验完全一致。 你拿到的组件文档、代码示例和直接连接官方 MCP 服务器没有区别。服务端会实时同步官方更新。

Key 泄露了怎么办？

联系管理员吊销旧 Key 并发放新 Key。