Perfonext Render MCP

perfonext-render-mcp

Next.js アプリの React のレンダー動作を分析し、エディターで修正を適用します。

perfonext-render-mcp は、GitHub Copilot、Claude Desktop、 Claude Code などの MCP クライアントに、Next.js のパフォーマンス改善に役立つ構造化された機械可読形式の React レンダー分析を提供する Model Context Protocol（MCP）サーバーです。ライブキャプチャセッションや React DevTools Profiler のエクスポートデータを、コンポーネントのコスト、正確な再レンダーの原因、リグレッションの差分に変換し、MCP クライアントが直接活用できるエビデンスを提供します。

クイックスタート

perfonext-render-mcp は標準的な MCP stdio サーバーで、MCP 対応クライアント（VS Code の GitHub Copilot、Claude Desktop、Claude Code、Cursor など）で利用できます。npx から直接実行します。

npx -y @perfonext/render-mcp

または、グローバルにインストールします。

npm install -g @perfonext/render-mcp

インストール後も、実行コマンドは perfonext-render-mcp のままです。

VS Code

.vscode/mcp.json（ワークスペースの MCP 設定ファイル）にサーバーを追加します。

{
  "servers": {
    "perfonext-render": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@perfonext/render-mcp"]
    }
  }
}

VS Code のウィンドウを再読み込みし、MCP: List Servers を実行してサーバーを起動するか、信頼を確認するプロンプトが表示されたら承認します。

Claude Desktop

サーバーを claude_desktop_config.json に追加します。

{
  "mcpServers": {
    "perfonext-render": {
      "command": "npx",
      "args": ["-y", "@perfonext/render-mcp"]
    }
  }
}

新しいサーバーを読み込むため、Claude Desktop を再起動します。

Claude Code

CLI からサーバーを追加します。

claude mcp add perfonext-render -- npx -y @perfonext/render-mcp

または、同じ mcpServers エントリーを .mcp.json に追加します。

その他の MCP クライアント

stdio MCP サーバーに対応するクライアントであれば、npx -y @perfonext/render-mcp を起動できます。MCP サーバーの設定形式については、ご利用のクライアントのドキュメントを参照してください。

ローカルでビルドしたチェックアウトを使用する場合は、command／args で node とリポジトリの dist/index.js を指定してください。

トラブルシューティング

macOS で nvm を使用している場合の spawn npx ENOENT／spawn node ENOENT

このエラーでサーバーが起動しない場合、GUI の MCP クライアントから nvm が見えていない可能性があります。macOS の GUI アプリはシェル設定（.zshrc／.bashrc）を読み込まないため、nvm でインストールした npx／node が PATH に含まれていません。npx の絶対パスを使用し、同じ Node ディレクトリを PATH に含めてください。

{
  "servers": {
    "perfonext-render": {
      "type": "stdio",
      "command": "/Users/YOU/.nvm/versions/node/v<version>/bin/npx",
      "args": ["-y", "@perfonext/render-mcp"],
      "env": {
        "PATH": "/Users/YOU/.nvm/versions/node/v<version>/bin:/usr/bin:/bin"
      }
    }
  }
}

これらのフィールドをクライアントのサーバーエントリーにマージします。VS Code の場合は servers の下に、Claude Desktop／Code の場合は mcpServers の下に追加してください。その後、アシスタントに 「アプリのレンダー分析を実行して」 と依頼します。

できること

perfonext-render-mcp は、React DevTools Profiler と react-scan を補完するエージェント向けツールです。機械可読な要約、再レンダリング原因の正確な特定、ソースを考慮した追加調査、差分比較を得意としています。すべてローカルで、収集 → 分析 → 修正のサイクルを実行できます。

• 収集 — ライブキャプチャ（react-scan/lite がイベントをリアルタイムでストリーミング）または手動の DevTools エクスポートを選択します
• 分析 — MCP は、コンポーネントのコスト、再レンダリングの原因、コミットの内訳、リグレッションなど、構造化された機械可読な根拠を返します
• 修正 — MCP クライアントは、その根拠を使って具体的なコード変更を提案し、適用します

注: ライブキャプチャセッション中は、React DevTools Timeline Profiler はイベントを受信しません（react-scan/lite がプロファイリングチャネルを使用します）。stop_render_capture を呼び出すと、React DevTools Timeline Profiler が再びイベントを受信できるようになります。

機能：

• ライブキャプチャ — 実行中の React アプリから、コミットごとの fiber イベントをローカルの HTTP エンドポイント経由で MCP に直接ストリーミングします。手動でのエクスポートは不要です
• 手動エクスポート — 入力方法の代替として、エクスポートした React DevTools Profiler の JSON ファイルを読み込みます
• 1 回の呼び出しで、コミット、最もコストの高いコンポーネント、検出されたレンダーの問題を要約します
• 負荷の高いコミットをランキングし、各スパイク内の上位コンポーネントを表示します
• レンダーコストの合計に基づいて、最も遅いコンポーネントを特定します
• 再レンダリングを繰り返すコンポーネントを強調表示します。ライブキャプチャで changeDescription データが提供される場合は、変更された props/state/hooks を正確に報告し、それ以外の場合は決定論的なヒューリスティックにフォールバックします
• 利用可能な場合は、ランキングされたコンポーネントにソースファイルと行番号を付記します
• DOM ホスト要素（div、span など）と名前のないコンポーネントをランキング結果から除外し、調査結果を実用的なものに保ちます
• 2 つのレンダープロファイルを比較し、リグレッションと改善点を明らかにします
• プロファイルをメモリに保持するため、MCP クライアントは再読み込みせずに反復して分析できます

ツール

エントリーポイント

ツール	説明
begin_render_analysis	エントリーポイントです。approach: "live" | "manual" を受け付けます。live の場合はキャプチャセッションを開始し、計測コードのスニペットを返します。manual の場合は、React DevTools Profiler のエクスポート手順を返します。

ライブキャプチャ

ツール	説明
run_render_capture	計測コードを組み込んだ後に呼び出します。method: "manual-interaction" | "test-suite" を受け付けます。ユーザーが選択した方法に応じた、具体的な手順を返します。
stop_render_capture	セッションを停止し、バッファリングされたイベントをプロファイルに確定します。分析用の profileId と dataQuality（exact | heuristic）を返します
get_captured_renders	任意の診断ツールです。停止せずにセッションの進行状況（コミット数、未知のイベント）を確認します。問題があるように見える場合にのみ呼び出してください。

分析

ツール	説明
load_render_profile	ディスク上のエクスポート済み React DevTools Profiler JSON ファイルを解析して読み込みます（手動でパスを指定するエントリーポイント）
get_render_summary	読み込んだプロファイルを要約します。レンダーコストの高いコンポーネント、最も負荷の高いコミット、検出されたレンダーの問題を表示します
get_hot_commits	コストの高いコミットを順に並べ、各スパイク内で上位のコンポーネントを表示します
get_slow_components	実際のレンダー時間の合計に基づいて、処理の遅いコンポーネントを順に並べます
get_rerender_causes	根拠、確信度、リスクスコアとともに再レンダーの原因を説明します。changeDescription データがある場合は、変更された props/state/hooks を正確に報告します（dataQuality: "exact"）。それ以外の場合はヒューリスティックを使用します
compare_renders	読み込んだ2つのレンダープロファイルを比較し、性能の悪化、改善、追加、削除を順に並べます

使用方法の概要

アシスタントに次のように依頼します： "アプリのレンダー分析を実行してください。"

MCP クライアントが begin_render_analysis を呼び出し、次の選択肢を提示します。

オプション A — ライブキャプチャ（推奨）

MCP クライアントは次の処理を行います。

1. キャプチャセッションを開始します（127.0.0.1:7721 の取り込みサーバー）
2. 存在しない場合は、react-scan を devDependency としてインストールします
3. セッションスニペットを含む instrumentation-client.js をプロジェクトのルートに書き込みます
4. アプリのクライアント側エントリーポイントからインポートします
5. 手動で操作するか、テストスイートを実行するかを尋ねます（run_render_capture）
6. セッションを停止して分析を実行します

テストスイートを実行しますか？通常どおり npx playwright test を使用してください。react-scan/lite は __REACT_DEVTOOLS_GLOBAL_HOOK__ を自動的にインストールするため、表示ウィンドウや React DevTools 拡張機能は 必要ありません。実行結果には引き続き changeDescription データと dataQuality: "exact" が含まれます。

commitCount: 0 が気づかれないまま発生する主な前提条件は 2 つあります。

• ビルドの種類。 通常の next build/next start では、React のプロファイリングフックがすべてビルドから除外されます。 次のいずれかを選択してください。
  • next dev — 実際のコンポーネント名が表示されますが、開発モードのオーバーヘッドにより、レンダー時間や比率が本番環境で実際のユーザーが体験するものと 一致しない場合があります。
  • next build --profile の後に next start — 本番環境に即したタイミングが得られますが、プロファイリングフラグに関係なく、本番環境での 圧縮によりコンポーネント名は 1〜2 文字（例："V"）に短縮されます。 これが検出されると、get_render_summary が警告を表示します。
• 計測のタイミング。 instrument() は React の初期化前に実行する必要があります。生成されたスニペットに示すような静的なトップレベルインポートであれば 問題ありません。React コンポーネントとしてマウントしたり、useEffect の内部で呼び出したりすると実行が遅すぎるため、何もキャプチャされません。

取り込みサーバーは**固定ポート（7721）**で実行されます。セッションごとに変更されるのは instrumentation-client.js 内の sessionId の行だけです。毎回ファイルを再設定する必要はありません。

オプション B — DevTools から手動でエクスポート

1. ブラウザーで React DevTools を開きます → Profiler タブ → Record
2. アプリを操作します
3. JSON をエクスポートし、ファイルパスを共有します
4. MCP クライアントが load_render_profile({ filePath: "..." }) を呼び出します

プロンプトの例

• 「アプリのレンダー分析を実行してください。」
• 「キャプチャを停止して、最も遅いコンポーネントを表示してください。」
• 「最も頻繁に再レンダーされているコンポーネントと、その理由を教えてください。」
• 「この実行結果を、リファクタリング前にキャプチャしたプロファイルと比較してください。」
• 「React DevTools のエクスポートデータがあります。読み込んで、遅い箇所を教えてください。」
• 「負荷が最も高いコミットと、各スパイクで支配的だったコンポーネントを表示してください。」

関連する Perfonext ツール

• perfonext-profiler-mcp — Next.js サーバー向け CPU プロファイリング（V8/Chrome）
• perfonext-build-mcp — Next.js のバンドル／ビルド分析

開発

npm install
npm run build
npm test

サンプルフィクスチャは tests/fixtures/ にあります。

ライセンス

MIT