HeroUI Pro

在 AI 编辑器中使用 HeroUI Pro 组件 — MCP 服务 + Skills 安装。

包安装 — 如需安装 @heroui-pro/react 组件包，请参阅 HeroUI Pro 安装文档。

说明

本服务是 HeroUI Pro 官方 MCP 和 Skills 的转发服务。

官方本服务
MCP 地址mcp.heroui.pro/mcphp-mcp-proxy.932324.xyz/mcp
Skills 地址heroui.pro/docs/installhp-skills.932324.xyz/install
认证方式HeroUI Pro Personal Token本服务发放的 Key
MCP 工具完全一致 — 相同的 4 个工具，相同的返回结果
Skills 内容完全一致 — 相同的 skill 文件，自动从官方同步

MCP Setup

将下面的 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 mcp add --transport http heroui-pro https://hp-mcp-proxy.932324.xyz/mcp --header "x-heroui-personal-token: <YOUR_KEY>"

或者添加到 .mcp.json：

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

重启后运行 /mcp 验证连接。

添加到 .vscode/mcp.json：

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

打开该文件，点击 heroui-pro 旁边的 Start。

添加到 .windsurf/mcp.json：

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

重启 Windsurf 生效。

添加到 settings.json（Cmd-,）：

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

重启后检查 Agent Panel 是否显示绿色指示器。

添加到 ~/.codex/config.toml（或项目级 .codex/config.toml）：

[mcp_servers.heroui-pro]
url = "https://hp-mcp-proxy.932324.xyz/mcp"
http_headers = { "x-heroui-personal-token" = "<YOUR_KEY>" }

重启 Codex 并运行 /mcp 验证。

Skills

Skills 是预配置的 AI 指令集，安装后编辑器会自动在相关场景调用。运行下方命令，把 <YOUR_KEY> 替换为你收到的 Key：

curl -fsSL https://hp-skills.932324.xyz/install | HEROUI_PERSONAL_TOKEN=<YOUR_KEY> bash -s -- heroui-react-pro
curl -fsSL https://hp-skills.932324.xyz/install | HEROUI_PERSONAL_TOKEN=<YOUR_KEY> bash -s -- heroui-pro-design-taste
自动检测 — 脚本会自动检测已安装的编辑器（Claude Code、Cursor、VS Code、Codex、OpenCode、Antigravity）并安装到对应目录。

Available Tools

ToolDescription
list_components列出所有 @heroui-pro/react 组件（按分类）
get_component_docs完整组件文档：结构、复合 API、Props、示例
get_cssCSS 系统：设计 Token、组件 BEM 样式、主题变体
get_docs指南：安装、主题、样式、组合、动画

get_css 支持三种模式：

get_css()                                    // 基础设计 token + 可用样式和主题列表
get_css({ components: ["sheet", "sidebar"] }) // 指定组件的 BEM CSS
get_css({ theme: "brutalism" })               // 完整主题变体（变量、字体、覆盖）

使用示例

帮我创建一个设置页面，包含 Sidebar、CellSwitch 开关、CellSelect 下拉框，以及一个 CellSlider 控制字体大小
创建一个仪表盘，包含 KPI 卡片、TrendChip 趋势标签，以及一个 AreaChart 展示周收入数据
查看 Sheet 组件的 BEM 类名，我想自定义遮罩层和内容区域的样式
Command 组件有哪些 Props？给我一个带键盘快捷键的示例

Troubleshooting

无法连接

MCP 使用 HTTP 传输，不需要 Node.js。确认 https://hp-mcp-proxy.932324.xyz/mcp 可访问，且 MCP 在编辑器设置中已启用。

认证错误

检查配置中 headers 里的 x-heroui-personal-token 是否正确。如果仍然不行，联系管理员确认 Key 是否有效。

工具没有被调用

在提示词中明确指出：“使用 HeroUI Pro MCP 查询 Sheet 组件 API” 或 “查看 @heroui-pro/react 文档中的 Command 结构”。

Skill 安装失败

确认已安装至少一个支持的编辑器（Claude Code、Cursor、VS Code、Codex、OpenCode 或 Antigravity）。检查网络是否可访问 https://hp-skills.932324.xyz。

需要帮助？

联系管理员获取支持。

HeroUI Pro MCP · HeroUI Pro 文档