CollectUIHTTP transport configuration for MCP. Deprecated soon; migrate to Local MCP.
HTTP MCP is deprecated soon and is scheduled to shut down on May 24, 2026. Migrate to Local MCP (hpmcp) as soon as possible.
The HTTP configuration below is kept as an archive for users who are still migrating.
React Pro — 图表、高级表单、导航、浮层、数据展示。
添加到 .cursor/mcp.json 或 Settings > Tools > MCP Servers：
{ "mcpServers": { "heroui-pro": { "type": "http", "url": "https://hp-mcp-proxy.932324.xyz/mcp", "headers": { "x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN" } } }}在 Settings > Tools & MCPs 中启用连接。
命令行添加：
claude mcp add -s user --transport http heroui-pro https://hp-mcp-proxy.932324.xyz/mcp --header "x-heroui-personal-token: HEROUI_PERSONAL_TOKEN"或添加到 .mcp.json：
{ "mcpServers": { "heroui-pro": { "type": "http", "url": "https://hp-mcp-proxy.932324.xyz/mcp", "headers": { "x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN" } } }}重启后运行 /mcp 确认连接。
添加到 .vscode/mcp.json：
{ "servers": { "heroui-pro": { "type": "http", "url": "https://hp-mcp-proxy.932324.xyz/mcp", "headers": { "x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN" } } }}打开文件并点击 Start。
添加到 .windsurf/mcp.json：
{ "mcpServers": { "heroui-pro": { "type": "http", "url": "https://hp-mcp-proxy.932324.xyz/mcp", "headers": { "x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN" } } }}重启 Windsurf 生效。
添加到 settings.json（Cmd-,）：
{ "context_servers": { "heroui-pro": { "type": "http", "url": "https://hp-mcp-proxy.932324.xyz/mcp", "headers": { "x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN" } } }}重启后检查 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" = "HEROUI_PERSONAL_TOKEN" }重启 Codex 后运行 /mcp 确认。
| 工具 | 说明 |
|---|---|
list_components | 按分类列出所有组件 |
get_component_docs | 获取完整文档：结构、复合 API、Props、示例 |
get_css | CSS 系统：设计令牌、组件 BEM 样式、主题变量 |
get_docs | 指南：安装、主题、样式、组合、动画 |
get_css 支持三种模式：
get_css() — 基础设计令牌 + 可用样式和主题列表get_css({ components: ["sheet", "sidebar"] }) — 指定组件的 BEM CSSget_css({ theme: "brutalism" }) — 完整主题变量（含字体和覆盖）用 Sidebar、CellSwitch 开关、CellSelect 下拉和 CellSlider 构建一个设置页创建一个仪表盘，包含 KPI 卡片、TrendChip 和 AreaChart 展示周收入查看 Sheet 组件的 BEM class，我想自定义 overlay 和 content 的样式