HeroUI Pro MCP Server

在 AI 编辑器中直接使用 HeroUI Pro 组件，实时转发官方 MCP 服务。

Setup

将下面的配置添加到你的编辑器中，把 <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 验证。

Available Tools

Tool	Description
`list_components`	列出所有 `@heroui-pro/react` 组件（按分类）
`get_component_docs`	完整组件文档：结构、复合 API、Props、示例
`get_css`	CSS 系统：设计 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 结构”。

需要帮助？

联系管理员获取支持。