关键词

HeroUI 组件文档React UI库React Native UI库AI 开发助手设计系统集成

项目简介

HeroUI MCP monorepo 包含为 HeroUI 设计系统提供服务的 Model Context Protocol (MCP) 服务器，主要功能是让 AI 助手能够直接访问 HeroUI 组件的文档和相关信息。它支持 React 和 React Native 两个主要平台，为开发者提供了便捷的组件探索、API查询、代码示例获取和主题信息访问能力。

主要功能点

  • 组件发现与浏览: 允许 AI 助手搜索和列出所有可用的 HeroUI 组件。
  • 完整文档访问: 提供组件的详细属性 (Props)、类型定义、使用示例和源码链接。
  • 主题信息: 访问 HeroUI 设计系统的主题变量、设计令牌和动画定义。
  • 安装与配置指南: 提供针对不同框架 (如 Next.js, Vite, Expo) 的 HeroUI 安装和初始化详细步骤。
  • 文档内容检索: 检索 HeroUI 的设计指南、原理和特定文档页面。

安装步骤

用户可以通过 'npx' 命令直接安装并运行 HeroUI MCP 服务器。选择与您项目平台对应的包。

  • 适用于 Web (React/Next.js) 项目: 在终端运行：'npx -y @heroui/react-mcp@latest'
  • 适用于 React Native 项目: 在终端运行：'npx -y @heroui/native-mcp@latest'

此命令将启动一个本地 MCP 服务器，通常通过标准输入/输出 (STDIO) 协议与 MCP 客户端（如 AI 助手）通信。

MCP 服务器配置 (供 MCP 客户端参考)

MCP 客户端（例如 Mastra AI SDK）需要配置 MCP 服务器的启动命令及其参数。以下是基于仓库信息生成的配置参考：

对于 HeroUI React MCP 服务器 (npm 包 '@heroui/react-mcp'):

{
  "serverName": "heroui-react",
  "command": "tsx",
  "args": [
    "path/to/heroui-mcp/packages/react-mcp/src/stdio.ts"
  ],
  "env": {
    "NODE_ENV": "development",
    "HEROUI_API_URL": "http://localhost:8787" // 或生产环境的 "https://mcp-api.heroui.com"
  }
}
  • 'serverName': 'heroui-react' - 标识此 MCP 服务器的名称。
  • 'command': 'tsx' - 用于执行 TypeScript 文件的运行时命令。
  • 'args': 指定 'react-mcp' 包内的 'src/stdio.ts' 文件路径，这是服务器的入口点。请将 '"path/to/heroui-mcp"' 替换为实际的仓库路径。
  • 'env.NODE_ENV': 'development' - 服务器运行环境。
  • 'env.HEROUI_API_URL': 'http://localhost:8787' (本地开发时) 或 'https://mcp-api.heroui.com' (生产环境时) - 这是 MCP 服务器内部用于访问其 Cloudflare Worker API 的基础 URL。

对于 HeroUI React Native MCP 服务器 (npm 包 '@heroui/native-mcp'):

{
  "serverName": "heroui-native",
  "command": "tsx",
  "args": [
    "path/to/heroui-mcp/packages/native-mcp/src/stdio.ts"
  ],
  "env": {
    "NODE_ENV": "development",
    "HEROUI_NATIVE_API_URL": "http://localhost:8788" // 或生产环境的 "https://native-mcp-api.heroui.com"
  }
}
  • 'serverName': 'heroui-native' - 标识此 MCP 服务器的名称。
  • 'command': 'tsx' - 用于执行 TypeScript 文件的运行时命令。
  • 'args': 指定 'native-mcp' 包内的 'src/stdio.ts' 文件路径，这是服务器的入口点。请将 '"path/to/heroui-mcp"' 替换为实际的仓库路径。
  • 'env.NODE_ENV': 'development' - 服务器运行环境。
  • 'env.HEROUI_NATIVE_API_URL': 'http://localhost:8788' (本地开发时) 或 'https://native-mcp-api.heroui.com' (生产环境时) - 这是 MCP 服务器内部用于访问其 Cloudflare Worker API 的基础 URL。

重要提示:

  • 上述 'command' 和 'args' 中的路径假设 'tsx' 命令在 PATH 中可用，且路径是相对于您的 MCP 客户端运行环境而言。
  • 实际使用时，请参考 MCP 客户端的文档来配置这些信息。

基本使用方法

一旦 MCP 服务器启动，兼容的 MCP 客户端（如 AI 助手、IDE 插件）将能够通过 JSON-RPC 协议与其通信，并调用其注册的工具来获取信息。

例如，AI 助手可以调用 'list_components' 工具来获取 HeroUI v3 React 组件列表：

list_components()

或调用 'get_component_info' 工具来获取特定组件的详细信息：

get_component_info({ component: "Button" })

这些工具的输出将被 AI 助手解析和利用，以生成更准确和有用的响应。

信息

分类

开发者工具

访问项目