HeroUI Pro

在 AI 编辑器中使用 HeroUI Pro 组件 — MCP 服务（独立模式）。

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

说明

本服务是 HeroUI Pro MCP 的独立部署，数据来自本地缓存，不依赖官方服务器。

官方本服务
MCP 地址mcp.heroui.pro/mcphp-mcp-local.932324.xyz/mcp
认证方式HeroUI Pro Personal Token本服务发放的 Key
list_components47 个组件，8 个分类
get_component_docs完整组件文档：结构、API、Props、示例
get_cssCSS Token、BEM 样式、主题不可用
get_docs安装、主题、样式指南不可用
Skills 安装heroui.pro/docs/install不可用

MCP Setup

将下面的 MCP 配置添加到你的编辑器中，把 <YOUR_KEY> 替换为你收到的 Key：

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

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

确保在 Settings > Tools & MCPs 中 heroui-pro 连接已启用。

claude mcp add --transport http --scope user heroui-pro https://hp-mcp-local.932324.xyz/mcp --header "x-heroui-personal-token: <YOUR_KEY>"

或者添加到项目级 .mcp.json：

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

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

添加到 .vscode/mcp.json：

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

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

添加到 .windsurf/mcp.json：

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

重启 Windsurf 生效。

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

{
  "context_servers": {
    "heroui-pro": {
      "url": "https://hp-mcp-local.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-local.932324.xyz/mcp"
http_headers = { "x-heroui-personal-token" = "<YOUR_KEY>" }

重启 Codex 并运行 /mcp 验证。

Available Tools

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

使用示例

帮我创建一个设置页面，包含 Sidebar、CellSwitch 开关、CellSelect 下拉框，以及一个 CellSlider 控制字体大小
创建一个仪表盘，包含 KPI 卡片、TrendChip 趋势标签，以及一个 AreaChart 展示周收入数据
Command 组件有哪些 Props？给我一个带键盘快捷键的示例

Troubleshooting

无法连接

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

认证错误

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

工具没有被调用

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

get_css / get_docs 返回不可用

这两个工具需要官方 MCP 服务器支持，独立模式下暂不可用。组件文档（list_components 和 get_component_docs）完全可用。

需要帮助？

联系管理员获取支持。

HeroUI Pro MCP · HeroUI Pro 文档