Unofficial Mcp Server For Primereact 10.x

primereact-mcp

Model Context Protocol（MCP）サーバーです。AI アシスタントに PrimeReact v10 コンポーネントのドキュメント（プロパティ、イベント、例、検索）へのフルアクセスを提供します。

なぜこれが必要なのでしょうか？
PrimeReact チームは、まだ公式の @primereact/mcp パッケージを公開していません。このサーバーは、公式の PrimeNG MCP サーバーを支えるものと同じエンジン（@primeuix/mcp）を使用し、PrimeReact の TypeScript 定義からコンポーネントデータを抽出して、その空白を埋めます。 公式の PrimeReact MCP は v11 とともにリリースされる予定です。

---

特長

• プロパティとイベントのドキュメントをすべて備えた PrimeReact v10 コンポーネント 105 種
• 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	PrimeReact コンポーネント 105 種をすべて一覧表示します。必要に応じてカテゴリで絞り込めます
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	2 つのコンポーネントを並べて比較します
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 は、公式の PrimeNG MCP サーバーと同じ共有エンジンである @primeuix/mcp の runPrimeMcpServer() を呼び出し、PrimeReact 固有の設定と生成されたコンポーネントデータを渡します。

---

コントリビューション

コントリビューションを歓迎します！改善が期待できる分野は次のとおりです。

• より充実したサンプル — より多くのコンポーネントのセクションに JSX コードスニペットを追加する
• PrimeReact v11 のサポート — アルファ版の 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