react-render-profile-mcp

react-render-profile-mcp

Model Context Protocol（MCP）サーバーとして提供される、React 向けの自律型パフォーマンス SRE ＆自動修復エンジンです。AI コーディングエージェント（Claude、Cursor、Copilot）のパフォーマンス認識のギャップを埋めるために特化して構築されています。

---

👁️ 死角：AI エージェントが React の本番環境を壊す理由

AI エージェントが Context Provider をリファクタリングしたり、状態アーキテクチャを変更したり、グローバルストアを接続したりすると、実行時のパフォーマンスへの影響がまったく見えません。

エージェントはユニットテストに成功し、コードをコンパイルできても、次のような壊滅的なパフォーマンスの低下を引き起こすことがあります。

• 1 回の状態更新が連鎖し、不要な子コンポーネントの再レンダリングが 80 回発生する。
• 不安定な Zustand/Redux セレクター参照によって無限レンダリングループが発生する。
• ハイドレーションの不一致により、React がサーバーでレンダリングされた HTML を破棄し、最初からマウントし直す。
• 不安定な key プロパティによって、レンダリングサイクルごとにコンポーネントがアンマウントおよびマウントされる（ライフサイクルの異常）。

react-render-profile-mcp は、AI エージェントに「第三の目」を与え、こうしたパフォーマンスのボトルネックを動的に測定、可視化し、自動修復します。

---

⚡ AI-SRE の 4 つの柱

このサーバーは生の JSON ダンプではなく、パフォーマンスデータを 4 つの主要なエンジニアリングの柱に沿って、構造化された実用的なインサイトとして整理します。

🧠 1. AST 自動修復エンジン（ts-morph）

ボトルネックが見つかった場合、エージェントがコードを手動で書き換える必要はありません。サーバーはディスク上のコンポーネントのソースコードを変更できます。

• ホイスティング：オブジェクトリテラルと配列リテラルをレンダー関数の外に静的に移動します。
• 動的メモ化：計算した依存配列を使って、不安定な関数や変数を useCallback および useMemo でラップします。
• ROI に基づくラップ：プロファイルで測定された自己実行時間と無駄なレンダリング回数から、比較のオーバーヘッドを正当化できる場合に限り、コンポーネントを React.memo でラップします（ROI > 1.5）。
• ルール監査：コンパイラの最適化を妨げないようにコードをスキャンします（Date.now()、Math.random()、レンダー中の useRef の変更を検出します）。

📊 2. インタラクティブ SVG カスケードビジュアライザー（MCP リソース）

カスタムのリソース URI スキーム react-profile://commits/{commitId}/cascade?profile_path={profile_path} を使って、親子間のレンダリンググラフをエージェントのチャットウィンドウに直接生成します。

• トリガーは、それぞれ異なる HSL パレットでスタイル設定され、伝播経路を区別できます。
  • 🔵 Context トリガー：青（海の波）
  • 🟠 Zustand/Redux ストア：オレンジ（サブスクライバーへの波紋）
  • 🔴 Props の無効化：赤（参照の不一致）
  • 🟢 状態変更：緑（エメラルド色のトリガー元）

🛡️ 3. RSC Flight ストリーム＆セキュリティプロファイラー

React Server Components（RSC）の Flight ストリームを分析し、配信を最適化します。

• 膨張したチャンク（> 50KB）と逐次的なウォーターフォールを特定します。
• **CVE-2025-55182（React2Shell）**の悪用のような、プロトタイプ走査の脆弱性がないかペイロードをスキャンします。

⚛️ 4. マルチレイヤー・トレース相関器

blink.user_timing マーカーを使って、React のコミットと Chrome Performance のタイムラインイベントを対応付けます。

• コミット後のレイアウト、ペイント、スタイル計算タスクを測定し、Core Web Vitals への実際の影響（CLS / INP の推定値）を算出します。

---

🛠️ MCP ツールリファレンス

以下は、このサーバーが公開するツールの概要です。すべてのツールで、React DevTools のエクスポート .json を指定する必須の profile_path を受け取ります。

ツール名	パラメーター	目的／出力
get_render_summary	profile_path	コミット数、合計レンダー時間、不要なレンダーの数、ライフサイクルの異常の概要を表示します。
find_spurious_renders	profile_path, min_render_count?	props／state が同一のままレンダーされたコンポーネントを一覧表示します。トリガーを UNSTABLE_PARENT_REF または CONTEXT_UPDATE に分類します。
analyze_compiler_efficacy	profile_path, invalid_threshold?	Invalidation Index を算出し、React Compiler または React.memo が適用されていない箇所を特定します。
diagnose_hydration_and_suspense	profile_path, waterfall_threshold_ms?	サーバーとクライアント間のハイドレーションの不一致、およびネストされた Suspense のフェッチウォーターフォールを検出します。
evaluate_external_store_performance	profile_path, max_blocking_task_ms?	不安定な useSyncExternalStore セレクターと、優先度の高い同期ブロッキングタスクを検出します。
trace_state_cascade_footprint	profile_path, commit_index	仮想オーナーツリーをたどり、更新の伝播深度とコンシューマー数を測定します。
suggest_memoization	profile_path, min_wasted_ms?	平均セルフタイム（しきい値は > 2ms）に基づき、ROI の高い React.memo の適用を提案します。
remediate_component	file_path, component_name, unstable_props, roi_score	AST をディスク上で変更し、変数の巻き上げ、フックのラップ、メモ化の適用を行います。
audit_compiler_rules	file_path, component_name	コンポーネントのソースコードを静的に監査し、React Compiler のルール違反を検出します。
profile_rsc_stream	stream_payload	RSC Flight ログを解析し、チャンクサイズ、ウォーターフォール、React2Shell の悪用を監査します。
correlate_chrome_trace	profile_path, trace_path	React のコミットを Chrome のトレースイベントに合わせ、CLS／INP のウェブバイタルへの影響を算出します。

---

🤖 プロンプトインジェクション：エージェントにプロファイリングを教える

このサーバーを最大限に活用するには、次のプロンプトをエージェントのシステム指示に追加してください（例：.cursorrules、Cursor System Prompt、または Claude Custom Instructions）。

You are equipped with `react-render-profile-mcp`. Use it systematically whenever:

1. You make structural changes to React components, global state providers, or store selectors.
2. The user reports lag, slow input response, or UI stuttering.
3. You refactor context providers, Zustand selectors, or Redux dispatches.

Debugging Workflow:

- Ask the user to record and export a React DevTools profile (.json).
- Run `get_render_summary` to understand the scale of the problem and look for `lifecycle_anomaly: true` (unstable keys).
- Run `find_spurious_renders` and `analyze_compiler_efficacy` to pinpoint unstable prop references.
- Call the `react-profile://commits/{commitId}/cascade` resource to visualize cascades.
- Use `remediate_component` to automatically apply AST optimizations (hoisting static variables, wrapping hooks) instead of doing it manually.

---

📋 プロファイルのエクスポート方法

1. ブラウザーで React DevTools を開きます。
2. Profiler タブに移動します。
3. Record ボタン（円形）をクリックし、アプリケーションを操作してパフォーマンスの問題を再現してから、Stop をクリックします。
4. Save Profile アイコン（💾）をクリックして、.json ファイルをダウンロードします。
5. このファイルの絶対パスを MCP サーバーに指定します。

---

⚙️ セットアップとインストール

Claude Desktop

claude_desktop_config.json に次の内容を追加します。

{
  "mcpServers": {
    "react-render-profile": {
      "command": "npx",
      "args": ["-y", "react-render-profile-mcp"]
    }
  }
}

Cursor / VS Code / その他のクライアント

command タイプの MCP サーバーを追加します。

• コマンド：npx -y react-render-profile-mcp

---

🔧 内部の仕組み

• ESM ネイティブ：TypeScript ESM で構築され、高速な Node.js インポート向けに最適化されています。
• React DevTools v5 プロトコル：シリアライズされた操作配列をネイティブにデコードし、ファイバースナップショットと名前マップを解決します。
• レーンの識別：高優先度レーンの更新と、並行トランジションのコミット（低優先度／アイドル）を区別し、誤検知による回帰フラグを防ぎます。
• AST 変更の安全性：ts-morph のステートメント操作ブロックを実装し、複数回の書き換え時によくあるパーサー状態の破損を回避します。

---

MCP ツールベルトの一部

以下とともに開発されました。

• tailwind-context-resolver-mcp — Tailwind のデザイントークンを解決し、ユーティリティクラスを検証します。
• v8-cpu-profile-decoder-mcp — Node.js バックエンドのパフォーマンス調整向けに V8 の CPU プロファイルをデコードします。

---

ライセンス

MIT