Primereact MCP

primereact-mcp

A Model Context Protocol (MCP) server that gives AI assistants full access to PrimeReact v10 component documentation — props, events, examples, and search.

Why does this exist?

The PrimeReact team has not yet published an official @primereact/mcp package. This server fills that gap using the same engine (@primeuix/mcp) that powers the official PrimeNG MCP server, with component data extracted from PrimeReact's TypeScript definitions.

The official PrimeReact MCP will be launched with v11.

---

Features

• 105 PrimeReact v10 components with full prop/event documentation
• 15+ MCP tools: search, suggest, inspect props, get examples, compare components, and more
• Works with Claude Code, Claude Desktop, Cursor, Windsurf, and any MCP-compatible client
• Generated directly from PrimeReact's TypeScript .d.ts source — no stale hand-written docs

---

Quick Start

Prerequisites

• Node.js 18 or later
• An MCP-compatible AI client (see below)

Option A — npx (no install needed)

Use npx -y primereact-mcp directly in your MCP client config. Component data ships pre-generated inside the package.

Option B — clone and run locally

git clone https://github.com/wisdomrock/primereact-mcp.git

cd primereact-mcp npm install node index.mjs # starts the server

To regenerate component data after a PrimeReact version upgrade:

npm install primereact@10   # install the target version

node generate-data.mjs # rewrites components-data.json

---

MCP Client Setup

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

Or add it to your project's .mcp.json:

{

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

Claude Desktop

Add the following to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

{

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

Cursor

Add to .cursor/mcp.json in your project root:

{

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

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{

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

---

Available Tools

Example prompts

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.

---

Upgrading PrimeReact Version

To update the component data after upgrading PrimeReact:

npm install primereact@NEW_VERSION

node generate-data.mjs

The generate-data.mjs script re-reads all .d.ts files and rewrites components-data.json.

---

Project Structure

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 Registry

This server is published to the Official MCP Registry. Registry metadata is in server.json at the repo root.

How it works

1. `generate-data.mjs` reads each component's .d.ts file from the primereact npm package, parses JSDoc comments and TypeScript interface definitions using a line-by-line state machine, and writes structured JSON to components-data.json.

1. `index.mjs` calls runPrimeMcpServer() from @primeuix/mcp — the same shared engine used by the official PrimeNG MCP server — passing PrimeReact-specific configuration and the generated component data.

---

Contributing

Contributions welcome! Areas that would benefit from improvement:

• Richer examples — add JSX code snippets to more component sections
• PrimeReact v11 support — the alpha v11 uses @primereact/types, requiring a different parsing strategy
• Pass Through (PT) data — extract PT options from .d.ts files
• Design tokens — extract CSS variable names

Please open an issue before sending a large PR.

---

License

MIT — see LICENSE.

---

Related

• @primeng/mcp — Official MCP server for PrimeNG (Angular)
• @primeuix/mcp — Shared MCP engine by the PrimeFaces team
• PrimeReact Documentation
• Model Context Protocol