mirror of https://github.com/hanzoai/react.git synced 2026-09-24 17:02:27 +00:00

Files

T

Ruslan LesiutinandGitHub 54831395ea [react-devtools-cdt-mcp] chrome-devtools-mcp integration (#36600 )

> [!NOTE]
> I had to invalidate `node_modules` cache keys on CI, because we are
now using `react-devtools-facade` package and we need to create a
symlink to it, otherwise Flow will fail. We use a hash value of
`yarn.lock`, but it's not invalidated when a package inside yarn
workspace is using another private package.

---

This change introduces new `react-devtools-cdt-mcp` package, which is
responsible for installing React tools for `chrome-devtools-mcp` server.
It is using `react-devtools-facade` as a dependency: it doesn't own the
implementation of these tools, it just relays Facade's tools to
`chrome-devtools-mcp` format.

When CDT MCP navigates to a fresh page, it emits unique
`devtoolsdiscovery` method, that has `respondWith` method, which is the
integration point between runtime libraries and MCP server.
`react-devtools-cdt-mcp` is the owner for this integration. More details
are available here -
https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/third-party-developer-tools.md.

Here is the list of tools that are being installed:
- `react_get_component_tree`
- `react_get_component_by_uid`
- `react_find_components`
- `react_get_component_source`
- `react_get_owner_stack_trace`
- `react_get_owner_stack`
- `react_start_profiling`
- `react_stop_profiling `
- `react_get_trace_overview`
- `react_get_commit_report`

--- 
Quick demo how to test the package with `chrome-devtools-mcp` CLI. Steps
are also mentioned in `README` file:


https://github.com/user-attachments/assets/af9fefce-03f0-4ebd-a94f-e9dd72b87f4d

2026-06-30 17:52:30 +02:00

1.7 KiB

Raw Permalink Blame History

Fixture app

A small React app for manually exercising the react-devtools-cdt-mcp tools with chrome-devtools-mcp. Not part of the published package.

It renders a variety of components so every tool has something to inspect: function/host/context/memo/forwardRef nodes, a custom hook (nested subHooks), keyed list items, and timer/button components that re-render (for profiling).

Like react-devtools-shell, React (and the DevTools backend dependencies the facade uses) are resolved from the monorepo build output via webpack aliases, so the fixture runs against React from source — no CDN copy, and react_get_component_by_uid hooks inspection matches the build exactly.

Run

Build React for DevTools from the repo root (populates build/oss-experimental/):
```
yarn build-for-devtools
```
Start the fixture dev server (bundles the package source + this app):
```
cd packages/react-devtools-cdt-mcp/fixtures/app
yarn start
```
This opens http://localhost:8080/.
Point chrome-devtools-mcp at the page. The React tool group is discovered automatically — list it with list_3p_developer_tools and call the tools with execute_3p_developer_tool({toolName, params}).

Test with the chrome-devtools-mcp CLI

With the dev server running, drive the tools end-to-end from the CLI:

Start chrome-devtools-mcp with experimental third-party tools enabled:
```
chrome-devtools start --categoryExperimentalThirdParty=true
```

Navigate to the fixture page:

chrome-devtools navigate_page --url http://localhost:8080

Run a React tool by name:

chrome-devtools execute_3p_developer_tool <react-tool-name>

1.7 KiB Raw Permalink Blame History

Fixture app

Run

Test with the chrome-devtools-mcp CLI

1.7 KiB

Raw Permalink Blame History