Unofficial Mcp Server For Primereact 10.x

primereact-mcp

一个模型上下文协议（MCP）服务，可让 AI 助手全面访问 PrimeReact v10 组件文档，包括属性、事件、示例和搜索功能。

为什么要创建这个项目？
PrimeReact 团队尚未发布官方的 @primereact/mcp 软件包。此服务使用与官方 PrimeNG MCP 服务相同的引擎（@primeuix/mcp），并从 PrimeReact 的 TypeScript 定义中提取组件数据，以填补这一空缺。 官方 PrimeReact MCP 将随 v11 一同发布。

---

功能

• 提供 105 个 PrimeReact v10 组件的完整属性和事件文档
• 提供 15+ 个 MCP 工具：搜索、建议、检查属性、获取示例、比较组件等
• 兼容 Claude Code、Claude Desktop、Cursor、Windsurf 以及任何兼容 MCP 的客户端
• 直接根据 PrimeReact 的 TypeScript .d.ts 源文件生成，不使用过时的手写文档

---

快速开始

前置条件

• Node.js 18 或更高版本
• 兼容 MCP 的 AI 客户端（见下文）

选项 A — npx（无需安装）

在 MCP 客户端配置中直接使用 npx -y primereact-mcp。组件数据已预先生成并打包在软件包中。

选项 B — 克隆并在本地运行

git clone https://github.com/wisdomrock/primereact-mcp.git
cd primereact-mcp
npm install
node index.mjs   # starts the server

升级 PrimeReact 版本后，若要重新生成组件数据：

npm install primereact@10   # install the target version
node generate-data.mjs      # rewrites components-data.json

---

MCP 客户端配置

Claude Code（CLI）

# via npx — zero install
claude mcp add primereact -- npx -y primereact-mcp

# or point at a local clone
claude mcp add primereact -- node /absolute/path/to/primereact-mcp/index.mjs

或者将其添加到项目的 .mcp.json 中：

{
  "mcpServers": {
    "primereact": {
      "command": "npx",
      "args": ["-y", "primereact-mcp"]
    }
  }
}

Claude Desktop

将以下内容添加到 Claude Desktop 配置文件中（macOS 上的路径为 ~/Library/Application Support/Claude/claude_desktop_config.json）：

{
  "mcpServers": {
    "primereact": {
      "command": "npx",
      "args": ["-y", "primereact-mcp"]
    }
  }
}

Cursor

将以下内容添加到项目根目录下的 .cursor/mcp.json：

{
  "mcpServers": {
    "primereact": {
      "command": "npx",
      "args": ["-y", "primereact-mcp"]
    }
  }
}

Windsurf

将以下内容添加到 ~/.codeium/windsurf/mcp_config.json：

{
  "mcpServers": {
    "primereact": {
      "command": "npx",
      "args": ["-y", "primereact-mcp"]
    }
  }
}

---

可用工具

工具	描述
list_components	列出全部 105 个 PrimeReact 组件，可按类别筛选
get_component	获取组件的完整详情（统计信息、属性预览、章节）
get_component_props	获取组件的全部属性及其类型和说明
get_component_events	获取组件支持的所有事件回调
get_component_methods	获取组件方法（如有文档说明）
get_component_slots	获取组件的插槽/渲染属性
get_component_pt	获取 Pass Through（PT）自定义选项
get_component_tokens	获取设计令牌（CSS 变量）
get_component_styles	获取 CSS 类名
get_component_sections	获取包含示例的所有章节（基础、高级等）
get_component_import	获取正确的导入语句
get_component_url	获取官方文档 URL
get_usage_example	获取组件代码示例
search_components	按名称或描述搜索组件
find_by_prop	查找具有指定属性的所有组件
find_by_event	查找会触发指定事件的所有组件
find_components_with_feature	查找具有指定功能的组件（例如“filter”“lazy”“virtual”）
compare_components	并排比较两个组件
suggest_component	根据用例描述推荐组件
get_categories	获取所有组件类别
get_version_info	获取 PrimeReact 版本和兼容性信息
get_form_components	获取所有表单输入组件
get_data_components	获取所有数据显示组件（表格、列表、树）
get_overlay_components	获取所有覆盖层/弹出组件

提示词示例

Which PrimeReact component should I use for a searchable multi-select?

What props does the DataTable component accept?

Find all PrimeReact components that have a filter prop.

Compare the Dropdown and AutoComplete components.

Show me the import statement for the Calendar component.

---

升级 PrimeReact 版本

升级 PrimeReact 后，如需更新组件数据：

npm install primereact@NEW_VERSION
node generate-data.mjs

generate-data.mjs 脚本会重新读取所有 .d.ts 文件，并重写 components-data.json。

---

项目结构

primereact-mcp/
├── index.mjs              # MCP server entry point
├── generate-data.mjs      # Generates components-data.json from .d.ts files
├── components-data.json   # Generated component data (committed for convenience)
├── server.json            # MCP Registry metadata
├── package.json
└── README.md

MCP 注册表

此服务已发布到官方 MCP 注册表。注册表元数据位于仓库根目录的 server.json 中。

工作原理

1. generate-data.mjs 从 primereact npm 包中读取每个组件的 .d.ts 文件，使用逐行状态机解析 JSDoc 注释和 TypeScript 接口定义，并将结构化 JSON 写入 components-data.json。

2. index.mjs 调用 @primeuix/mcp 中的 runPrimeMcpServer()——该函数与官方 PrimeNG MCP 服务使用同一套共享引擎——并传入 PrimeReact 专属配置和生成的组件数据。

---

贡献

欢迎贡献！以下方面有改进空间：

• 更丰富的示例 — 为更多组件章节添加 JSX 代码片段
• 支持 PrimeReact v11 — alpha 版 v11 使用 @primereact/types，因此需要采用不同的解析策略
• Pass Through (PT) 数据 — 从 .d.ts 文件中提取 PT 选项
• 设计令牌 — 提取 CSS 变量名称

提交大型 PR 前，请先创建 issue。

---

许可证

MIT — 详见 LICENSE。

---

相关项目

• @primeng/mcp — PrimeNG（Angular）的官方 MCP 服务
• @primeuix/mcp — PrimeFaces 团队提供的共享 MCP 引擎
• PrimeReact 文档
• Model Context Protocol