New:Socket for Asana Is Now Available.Learn more
Get Started

primereact-mcp

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

primereact-mcp

MCP server for PrimeReact v10 component documentation — props, events, examples, and search for AI assistants

Source
npmnpm
Version
1.2.0
Version published
Weekly downloads
41
-44.59%
Maintainers
1
Weekly downloads
 
Created
Source

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

ToolDescription
list_componentsList all 105 PrimeReact components, optionally filtered by category
get_componentGet full details for a component (stats, props preview, sections)
get_component_propsGet all props for a component with types and descriptions
get_component_eventsGet all event callbacks a component supports
get_component_methodsGet component methods (where documented)
get_component_slotsGet slots/render props for a component
get_component_ptGet Pass Through (PT) customization options
get_component_tokensGet design tokens (CSS variables)
get_component_stylesGet CSS class names
get_component_sectionsGet all sections with examples (basic, advanced, etc.)
get_component_importGet the correct import statement
get_component_urlGet the official documentation URL
get_usage_exampleGet code examples for a component
search_componentsSearch components by name or description
find_by_propFind all components that have a specific prop
find_by_eventFind all components that emit a specific event
find_components_with_featureFind components with a feature (e.g. "filter", "lazy", "virtual")
compare_componentsCompare two components side by side
suggest_componentSuggest components based on a use-case description
get_categoriesGet all component categories
get_version_infoGet PrimeReact version and compatibility info
get_form_componentsGet all form input components
get_data_componentsGet all data display components (tables, lists, trees)
get_overlay_componentsGet 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.

Keywords

mcp

FAQs

Package last updated on 05 Jun 2026

Related posts