io.github.wisdomrock/primereact-mcp

105 PrimeReact v10 components with props, types, and events
Open source Open in the app JSON README (API)
About

105 PrimeReact v10 components with props, types, and events
Details

Kind: MCP servers
Topic: No topic detected
Publisher: wisdomrock
Origin: official
Category: ferramentas
Transport: local
Version: 1.2.3
Last push: 2026-06-05T13:43:17Z
Repository state: ativo
Language: HTML
License: MIT
Added: 2026-08-29 04:01:40
Updated: 2026-08-29 04:01:40
Origin id: io.github.wisdomrock/primereact-mcp
README

# 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](https://nodejs.org/) 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

```bash
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:

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

---

## MCP Client Setup

### Claude Code (CLI)

```bash
# 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`:

```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):

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

### Cursor

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

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

### Windsurf

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

```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:

```bash
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](https://modelcontextprotocol.io). Registry metadata is in [`server.json`](./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`.

2. **`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](./LICENSE).

---

## Related

- [@primeng/mcp](https://www.npmjs.com/package/@primeng/mcp) — Official MCP server for PrimeNG (Angular)
- [@primeuix/mcp](https://www.npmjs.com/package/@primeuix/mcp) — Shared MCP engine by the PrimeFaces team
- [PrimeReact Documentation](https://primereact.org)
- [Model Context Protocol](https://modelcontextprotocol.io)
io.github.wisdomrock/primereact-mcp

About

Details

README

More
