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
| Tool | Description |
|---|
list_components | List all 105 PrimeReact components, optionally filtered by category |
get_component | Get full details for a component (stats, props preview, sections) |
get_component_props | Get all props for a component with types and descriptions |
get_component_events | Get all event callbacks a component supports |
get_component_methods | Get component methods (where documented) |
get_component_slots | Get slots/render props for a component |
get_component_pt | Get Pass Through (PT) customization options |
get_component_tokens | Get design tokens (CSS variables) |
get_component_styles | Get CSS class names |
get_component_sections | Get all sections with examples (basic, advanced, etc.) |
get_component_import | Get the correct import statement |
get_component_url | Get the official documentation URL |
get_usage_example | Get code examples for a component |
search_components | Search components by name or description |
find_by_prop | Find all components that have a specific prop |
find_by_event | Find all components that emit a specific event |
find_components_with_feature | Find components with a feature (e.g. "filter", "lazy", "virtual") |
compare_components | Compare two components side by side |
suggest_component | Suggest components based on a use-case description |
get_categories | Get all component categories |
get_version_info | Get PrimeReact version and compatibility info |
get_form_components | Get all form input components |
get_data_components | Get all data display components (tables, lists, trees) |
get_overlay_components | Get all overlay/popup components |
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
-
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.
-
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
