MCP 服务器

HeroUI MCP 服务器让 AI 助手直接读取 HeroUI Native 组件文档，便于在 AI 驱动的开发流程中使用 HeroUI。

当前 MCP 服务器支持 heroui-native 与 stdio 传输。npm 包名为 @heroui/native-mcp。源码见 GitHub。

快速配置

Cursor：

或手动添加到 Cursor 设置 → Tools → MCP Servers：

{
  "mcpServers": {
    "heroui-native": {
      "command": "npx",
      "args": ["-y", "@heroui/native-mcp@latest"]
    }
  }
}

也可将以下内容加入 ~/.cursor/mcp.json。详见 Cursor 文档。

Claude Code： 在终端执行：

claude mcp add heroui-native -- npx -y @heroui/native-mcp@latest

或手动写入项目的 .mcp.json：

{
  "mcpServers": {
    "heroui-native": {
      "command": "npx",
      "args": ["-y", "@heroui/native-mcp@latest"]
    }
  }
}

添加配置后重启 Claude Code，运行 /mcp 查看列表；若显示 Connected 即可使用。

更多说明见 Claude Code MCP 文档。

Windsurf： 在项目 .windsurf/mcp.json 中加入：

{
  "mcpServers": {
    "heroui-native": {
      "command": "npx",
      "args": ["-y", "@heroui/native-mcp@latest"]
    }
  }
}

保存后重启 Windsurf 以生效。

详见 Windsurf MCP 文档。

Zed： 在 settings.json 中配置（命令面板 zed: open settings 或 Cmd-, / Ctrl-,）：

{
  "context_servers": {
    "heroui-native": {
      "command": "npx",
      "args": ["-y", "@heroui/native-mcp@latest"],
      "env": {}
    }
  }
}

重启 Zed 后，在 Agent 面板设置中确认 heroui-native 旁指示点为绿色，提示为「Server is active」。

详见 Zed MCP 文档。

VS Code： 若配合 GitHub Copilot 使用 MCP，在项目 .vscode/mcp.json 中添加：

{
  "servers": {
    "heroui-native": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@heroui/native-mcp@latest"]
    }
  }
}

打开 .vscode/mcp.json，在 heroui-native 旁点击 Start。

详见 VS Code MCP 文档。

Codex： 写入 ~/.codex/config.toml 或项目内 .codex/config.toml：

[mcp_servers.heroui-native]
command = "npx"
args = ["-y", "@heroui/native-mcp@latest"]

重启 Codex，在 TUI 中运行 /mcp 校验服务器已激活。

详见 Codex MCP 文档。

OpenCode： 在项目 opencode.json 中添加：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "heroui-native": {
      "type": "local",
      "command": ["npx", "-y", "@heroui/native-mcp@latest"]
    }
  }
}

重启 OpenCode 后生效。

详见 OpenCode MCP 文档。

用法

配置完成后，可向 AI 提问，例如：

• "Help me install HeroUI Native in my Expo app"
• "Show me all HeroUI Native components"
• "What props does the Button component have?"
• "Give me an example of using the Card component"
• "What are the theme variables for dark mode?"

自动升级

MCP 也可协助将 HeroUI Native 升级到最新版本，例如：

"Hey Cursor, update HeroUI Native to the latest version"

助手通常会：

• 对比当前版本与最新发布
• 阅读变更日志中的破坏性变更
• 在项目中应用必要的代码更新

适用于升级到最新稳定版或预发布版本。

可用工具

MCP 向 AI 暴露以下工具：

故障排除

环境要求： Node.js 22 及以上。使用 npx 时会自动下载包。

需要帮助？ GitHub Issues | Discord 社区

链接

• npm 包
• GitHub 仓库
• 贡献指南