# react-devtools-cdt-mcp で AI エージェントが React のコンポーネントツリーを調べられるようにする !> `react-devtools-cdt-mcp` は実験的なライブラリです。Chrome DevTools MCP の実験的なサードパーティ開発者ツール API の上に作られており、ツールの名前や出力はリリースごとに変わる可能性があります。 [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) を使うと、AI エージェントがブラウザでページを開き、クリックや入力をして、アクセシビリティツリーのスナップショットやコンソールログを取得できます。しかし React アプリのデバッグでは、DOM から得られる情報だけでは足りない場面があります。スナップショットに現れるのはボタンや `
  • ` 要素だけで、それを描画したのがどのコンポーネントかはわかりません。入力が重いときにどのコンポーネントの再レンダリングが時間を使っているのかという情報も、Chrome DevTools MCP のパフォーマンストレースの出力から、エージェントがコンポーネント単位で得るのは難しいです。 人間の開発者は [React DevTools](https://react.dev/learn/react-developer-tools) のコンポーネントタブやプロファイラでこれらを確認します。[`react-devtools-cdt-mcp`](https://react.dev/reference/dev-tools/react-devtools-cdt-mcp) は、同じ情報を AI エージェントへ渡すためのライブラリです。アプリのエントリーファイルで import すると、コンポーネントツリーやレンダリング時間を調べる 12 個のツールが Chrome DevTools MCP に登録されます。 この記事では `react-devtools-cdt-mcp` の仕組みとセットアップを説明したうえで、Claude Code に「入力が重い原因を調べて」と依頼し、エージェントが React のプロファイリングツールを使って原因を特定する様子を見ます。 ## react-devtools-cdt-mcp の仕組み `react-devtools-cdt-mcp` 自身は名前に反して MCP サーバーではありません。デバッグするページの中で動くブラウザ向けのライブラリで、Chrome DevTools MCP がページを開いたときに、ページの中で登録されたツールを見つけて公開します。 ページの中のライブラリがエージェントにツールを提供できるのは、Chrome DevTools MCP の[サードパーティ開発者ツール](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/third-party-developer-tools.md)という仕組みによるものです。Chrome DevTools MCP はページを開いたときや選択中のページが変わったときに、`window` に対して `devtoolstooldiscovery` イベントを発行します。ページ側はこのイベントを受け取り、`event.respondWith()` でツールの一覧を返します。 ```js window.addEventListener("devtoolstooldiscovery", (event) => { event.respondWith({ name: "My Library Tools", description: "Tools for inspecting internal library state", tools: [ { name: "getInternalState", description: "Returns the current internal state of the framework.", inputSchema: { type: "object", properties: { componentId: { type: "string" } }, }, execute: async (input) => myFramework.getState(input.componentId), }, ], }); }); ``` 各ツールは名前、説明、JSON Schema で書いた入力の定義、ページ内で実行される `execute` 関数を持ちます。エージェントは Chrome DevTools MCP の次の 2 つのツールを通じて、ページが登録したツールを使います。 - `list_3p_developer_tools`: ページが登録したツールの一覧を返す - `execute_3p_developer_tool`: ツール名と JSON 文字列のパラメーターを受け取り、ページ内のツールを実行する [Chrome の公式ブログ](https://developer.chrome.com/blog/devtools-for-agents-3p-tools)によると、この仕組みの目的は、DOM には現れないフレームワーク内部の状態をエージェントへ渡すことです。最終的に描画された DOM は DevTools から直接見えますが、アプリケーションの本当の状態はコンポーネントの階層やシグナルといったフレームワークの内部にある、というのがその理由です。Angular チームもシグナルの依存関係や DI のグラフを調べるツールを実装しています。 `react-devtools-cdt-mcp` は、この仕組みに React 用のツールを登録するライブラリです。このパッケージ自身はツールのロジックを持っておらず、React DevTools のロジックを切り出した `react-devtools-facade` パッケージのツールを、Chrome DevTools MCP の形式に変換して登録しています。 ## セットアップ Vite と React で作った商品一覧アプリに `react-devtools-cdt-mcp` を導入します。まずパッケージを開発用の依存関係としてインストールします。 ```bash npm install --save-dev react-devtools-cdt-mcp@0.1.0 ``` エントリーファイルの先頭で `react-devtools-cdt-mcp/register` を import します。`react-devtools-cdt-mcp/register` は `react-dom/client` より前に置く必要があります。 ```jsx:src/main.jsx import "react-devtools-cdt-mcp/register"; import { createRoot } from "react-dom/client"; import App from "./App"; createRoot(document.getElementById("root")).render(); ``` !> `react-devtools-cdt-mcp` のツールはコンポーネントの props や Hooks の値を外部に公開するため、本番のバンドルには含めないでください。 次に Chrome DevTools MCP を `--categoryExperimentalThirdParty=true` フラグ付きで起動するよう設定します。サードパーティ開発者ツールは実験的な機能のため、このフラグがないと `list_3p_developer_tools` と `execute_3p_developer_tool` が公開されません。Claude Code では次のコマンドで追加します。 ```bash claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --categoryExperimentalThirdParty=true ``` 他の MCP クライアントでは、設定ファイルの `args` にフラグを追加します。 ```json { "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "-y", "chrome-devtools-mcp@latest", "--categoryExperimentalThirdParty=true" ] } } } ``` 開発サーバーを起動したページを Chrome DevTools MCP の `navigate_page` で開くと、レスポンスの末尾に React のツールの一覧が追加されます。 ```txt ## Third-party developer tools react: Inspect and profile the running React app. Components are addressed by stable uids (e.g. "r5") from react_get_component_tree; pass a uid to the other tools. Available tools: name="react_get_component_tree", description="Snapshot of the React component tree as {nodes}, ... name="react_get_component_by_uid", description="Detailed info for one component by uid: ... ... ``` `react` という名前のツールグループに、次の 12 個のツールが登録されています。 | ツール | 内容 | | ------------------------------------ | ------------------------------------------------------ | | `react_get_component_tree` | コンポーネントツリーのスナップショットを返す | | `react_find_components` | 名前の部分一致でコンポーネントを検索する | | `react_get_component_by_uid` | コンポーネントの props と Hooks を返す | | `react_get_component_by_dom_element` | DOM 要素に対応する React のホストコンポーネントを返す | | `react_get_parent_stack` | ツリー上の親を返す | | `react_get_owner_stack` | JSX でそのコンポーネントを作成したコンポーネントを返す | | `react_get_owner_stack_trace` | オーナーの連なりをスタックトレース形式の文字列で返す | | `react_get_component_source` | コンポーネントが定義されている位置を返す | | `react_start_profiling` | レンダリング時間の記録を開始する | | `react_stop_profiling` | レンダリング時間の記録を停止する | | `react_get_trace_overview` | 記録したコミットごとの概要を返す | | `react_get_commit_report` | 1 つのコミットで描画されたコンポーネントと時間を返す | ## コンポーネントを調べる 各ツールが何を返すのかを、MCP クライアントから直接呼び出して確認します。題材は、カートと絞り込み入力付きの商品一覧を表示するアプリです。 ```jsx:src/App.jsx import { useState } from "react"; const PRODUCTS = Array.from({ length: 200 }, (_, i) => ({ id: i, name: "Product " + (i + 1), price: 10 + i, })); export default function App() { const [query, setQuery] = useState(""); const visibleProducts = PRODUCTS.filter((product) => product.name.toLowerCase().includes(query.toLowerCase()), ); return (
    setQuery(e.target.value)} placeholder="Filter products" />
    ); } function Cart() { const [count, setCount] = useState(0); return (
    ); } function CartBadge({ count }) { return Cart: {count}; } function ProductList({ products }) { return ( ); } function ProductRow({ product }) { // 重い整形処理の代わりに、1 行あたり約 1ms CPU を占有する const start = performance.now(); while (performance.now() - start < 1) {} return (
  • {product.name} ${product.price}
    • ); } ``` `ProductRow` は 1 行あたり約 1ms CPU を占有します。絞り込み入力に文字を入力するたびに `App` が再レンダリングされ、残った商品の数だけ `ProductRow` も再レンダリングされるため、入力が重くなります。後半でエージェントにこの原因を調査させます。 ### 名前で検索して props と Hooks を見る `react_find_components` は、名前の部分一致でコンポーネントを検索します。`execute_3p_developer_tool` には、ツール名と JSON 文字列のパラメーターを渡します。 ```json { "toolName": "react_find_components", "params": "{\"name\":\"Cart\"}" } ``` `Cart` と `CartBadge` の 2 件が見つかりました。 ```json { "page": 1, "pageSize": 10, "totalCount": 2, "totalPages": 1, "results": [ { "uid": "r0", "type": "function", "name": "Cart", "key": null, "firstChild": "r1", "nextSibling": null }, { "uid": "r2", "type": "function", "name": "CartBadge", "key": null, "firstChild": "r3", "nextSibling": null } ] } ``` `"r0"` のような `uid` は、他のツールでコンポーネントを指定するための識別子です。同じコンポーネントであれば再レンダリングしても変わりませんが、ページをリロードすると振り直されます。`firstChild` と `nextSibling` は、ツリーの子と兄弟を `uid` で表しています。`react_get_component_tree` も同じ形のノードを配列で返します。 `react_get_component_by_uid` に `uid` と `"includeHooks": true` を渡すと、Hooks の値も返ります。 ```json { "toolName": "react_get_component_by_uid", "params": "{\"uid\":\"r0\",\"includeHooks\":true}" } ``` ```json { "uid": "r0", "type": "function", "name": "Cart", "hooks": [ { "id": 0, "name": "State", "value": 0, "subHooks": [] } ] } ``` `Cart` の `useState` が `0` を保持していることがわかります。props がある場合は、`children` を除いてシリアライズできる形に変換した値が返ります。 パラメーターが `inputSchema` に合わない場合は、ページ内のツールを呼ぶ前に Chrome DevTools MCP がエラーを返します。例えば `uid` を渡さずに `react_get_component_by_uid` を呼ぶと、次のエラーになりました。 ```txt Error: Invalid parameters for tool react_get_component_by_uid: data should have required property 'uid' ``` ### DOM 要素から React のコンポーネントをたどる エージェントは通常、`take_snapshot` で取得したアクセシビリティツリーをもとにページを操作します。スナップショットの各要素には `uid=1_14` のような ID が振られています。`react_get_component_by_dom_element` を使うと、この ID から対応する React のノードを取得できます。 ```txt ## Latest page snapshot uid=1_0 RootWebArea "react-devtools-cdt-mcp example" url="http://localhost:5173/" uid=1_1 main uid=1_2 "Cart: " uid=1_3 "0" uid=1_4 button "Add to cart" uid=1_5 textbox "Filter products" uid=1_6 "Product 1" ... uid=1_14 "Product 3" ``` `element` パラメーターに、スナップショットの ID を `{ "uid": "1_14" }` の形で渡してみます。 ```json { "toolName": "react_get_component_by_dom_element", "params": "{\"element\":{\"uid\":\"1_14\"}}" } ``` ```json { "uid": "r7", "type": "host", "name": "li" } ``` 結果は `
  • ` 要素を表すホストコンポーネントです。スナップショットの ID を DOM 要素の参照に変換するのは Chrome DevTools MCP の役割で、React 側のツールはその参照を受け取る形にしています。どの関数コンポーネントが描画したのかを知るには、取得した `uid` を次の 2 つのツールに渡します。 `react_get_parent_stack` は、ツリー上でどこにマウントされているかを、直近の親からルートの順に返します。 ```json [ { "uid": "r28", "name": "ProductRow", "type": "function" }, { "uid": "r13", "name": "ul", "type": "host" }, { "uid": "r12", "name": "ProductList", "type": "function" }, { "uid": "r6", "name": "main", "type": "host" }, { "uid": "r5", "name": "App", "type": "function" }, { "uid": "r4", "name": "createRoot()", "type": "root" } ] ``` `react_get_owner_stack` は、JSX でその要素を作成したコンポーネント（オーナー）を、直近のオーナーから順に返します。 ```json [ { "uid": "r28", "name": "ProductRow", "type": "function" }, { "uid": "r12", "name": "ProductList", "type": "function" }, { "uid": "r5", "name": "App", "type": "function" } ] ``` `react_get_parent_stack` には `