[mcp] Add MCP tool to print out the component tree of the currently open React App by jorge-cab · Pull Request #33305 · facebook/react

jorge-cab · 2025-05-19T16:07:02Z

Summary

This tool leverages DevTools to get the component tree from the currently open React App. This gives realtime information to agents about the state of the app.

How did you test this change?

Tested integration with Claude Desktop

…ee mcp tool

react-sizebot · 2025-05-19T18:31:12Z

Comparing: 462d08f...ca1d5e0

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.68 kB	6.68 kB	=	1.83 kB	1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	529.74 kB	529.74 kB	=	93.49 kB	93.49 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	=	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	=	651.48 kB	651.48 kB	=	114.76 kB	114.75 kB
facebook-www/ReactDOM-prod.classic.js	=	675.72 kB	675.72 kB	=	118.85 kB	118.84 kB
facebook-www/ReactDOM-prod.modern.js	=	666.00 kB	666.00 kB	=	117.23 kB	117.23 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against ca1d5e0

jorge-cab · 2025-05-20T17:46:03Z

@hoxyq Added the flag to webpack.config.js instead of webpack.backend.js because for some reason the variable would not be recognized in renderer.js unless set on webpack.config.js

hoxyq · 2025-05-20T17:50:21Z

packages/react-devtools-extensions/webpack.config.js

 const IS_EDGE = process.env.IS_EDGE === 'true';
 const IS_INTERNAL_VERSION = process.env.FEATURE_FLAG_TARGET === 'extension-fb';

+const IS_INTERNAL = process.env.IS_INTERNAL === 'true';


Suggested change

const IS_INTERNAL = process.env.IS_INTERNAL === 'true';

const IS_INTERNAL_MCP_BUILD = process.env.IS_INTERNAL_MCP_BUILD === 'true';

I see your comment here, this should be correct, yeah. Because installHook entrypoint, which imports fiber/renderer.js is listed in webpack.config.js.

To fix failing jobs on CI, please add __IS_INTERNAL_MCP_BUILD__: false to other build scripts, where applicable. You can check where __IS_CHROME__: false is defined, for example.

hoxyq · 2025-05-20T17:50:37Z

packages/react-devtools-extensions/webpack.config.js

      __IS_FIREFOX__: IS_FIREFOX,
      __IS_EDGE__: IS_EDGE,
      __IS_NATIVE__: false,
+      __IS_INTERNAL__: IS_INTERNAL,


Suggested change

__IS_INTERNAL__: IS_INTERNAL,

__IS_INTERNAL_MCP_BUILD__: IS_INTERNAL_MCP_BUILD,

hoxyq · 2025-05-20T17:51:19Z

.eslintrc.js

        __IS_FIREFOX__: 'readonly',
        __IS_EDGE__: 'readonly',
        __IS_NATIVE__: 'readonly',
+        __IS_INTERNAL__: 'readonly',


Suggested change

__IS_INTERNAL__: 'readonly',

__IS_INTERNAL_MCP_BUILD__: 'readonly',

hoxyq · 2025-05-20T17:51:37Z

packages/react-devtools-shared/src/backend/fiber/renderer.js

    getNearestMountedDOMNode,
    getElementIDForHostInstance,
    getInstanceAndStyle,
+    ...(__IS_INTERNAL__ && {internal_only_getComponentTree}),


Suggested change

...(__IS_INTERNAL__ && {internal_only_getComponentTree}),

...(__IS_INTERNAL_MCP_BUILD__ && {internal_only_getComponentTree}),

hoxyq · 2025-05-20T17:54:04Z

compiler/packages/react-mcp-server/src/tools/componentTree.ts

+      const componentTree = await localhostPage.evaluate(() => {
+        return (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces
+          .get(1)
+          .getComponentTree();


Suggested change

.getComponentTree();

.__internal_only_getComponentTree();

hoxyq · 2025-05-20T17:55:35Z

packages/react-devtools-shared/src/backend/fiber/renderer.js

    return unresolvedSource;
  }

+  function internal_only_getComponentTree(): string {


Suggested change

function internal_only_getComponentTree(): string {

function __internal_only_getComponentTree(): string {

Also, can you try gating the definition of this function in __IS_INTERNAL_MCP_BUILD__?

if (__IS_INTERNAL_MCP_BUILD__) { function __internal_only_getComponentTree(): string { ... } }

Also, can you try gating the definition of this function in __IS_INTERNAL_MCP_BUILD__?

if (__IS_INTERNAL_MCP_BUILD__) { function __internal_only_getComponentTree(): string { ... } }

Hmm this doesn't seem to work, I get a not defined error

hoxyq · 2025-05-20T18:00:09Z

compiler/packages/react-mcp-server/src/tools/componentTree.ts

+    if (localhostPage) {
+      const componentTree = await localhostPage.evaluate(() => {
+        return (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces
+          .get(1)


get(1) will usually return you the Fiber renderer, basically the client-side renderer of React.

In case of RSC, there could also be another renderer. I am not sure about the order of registration, but it would probably be registered after the Fiber one.

For component tree, we probably care only about Fiber renderer, but worth keeping in mind that there could be rare cases where there are multiple renderers.

hoxyq · 2025-05-20T18:13:18Z

packages/react-devtools-shared/src/backend/fiber/renderer.js

+
+      const name =
+        (instance.kind !== VIRTUAL_INSTANCE
+          ? getDisplayNameForFiber(instance.data)


There is a custom logic for Compiler, whereas every Fiber that has a trace of useMemoCache would have a Forget(...) prefix. Also for React.memo and HOC.

You kinda creating a dependency here between RDT and MCP, because if next time we decide to change Forget to anything else like Compiled, it would require updating MCP prompt or whatever.

I am not against keeping it like this for now, but maybe worth forking the getDisplayNameForFiber function and adding some customisation.

hoxyq · 2025-05-20T18:30:48Z

packages/react-devtools-shared/src/backend/fiber/renderer.js

+    idToDevToolsInstanceMap.forEach(instance => {
+      if (
+        instance.parent === null ||
+        (instance.parent.kind === FILTERED_FIBER_INSTANCE &&


How complete you want this tree representation to be? Right now we filter out lots of things, see shouldFilterFiber implementation.

Maybe you should get a tree representation as full as it is.

Also, this filter out things that are defined in user filters. For example, I think we have a default filter for DOM-elements, like div, span, ...

Oh yes, I think we'll benefit from having more data to pipe into the LLM I'll remove this line

poteto

Looks good to me for a first pass, just minor comments. Please address @hoxyq's feedback before landing.

poteto · 2025-05-23T19:26:37Z

compiler/packages/react-mcp-server/src/index.ts

+    const componentTree = await parseReactComponentTree(url);
+
+    return {
+      content: [
+        {
+          type: 'text' as const,
+          text: componentTree,
+        },
+      ],
+    };


probably want to wrap this in a try/catch and return the error response to the llm, like we do in other tools

poteto · 2025-05-23T19:27:35Z

compiler/packages/react-mcp-server/src/tools/componentTree.ts

+
+      return componentTree;
+    } else {
+      throw new Error('Localhost page not found');


Suggested change

throw new Error('Localhost page not found');

throw new Error(`Could not open the page at ${url}. Is your server running?`);

hoxyq

Please still try gating __internal_only_getComponentTree function definition under __IS_INTERNAL_MCP_BUILD__.

I just want to make sure this dead code doesn't get into production builds, you can double-check it by building it and then inspecting the source scripts.

If ESLint is unhappy about it, just suppress the error.

Full list of changes: * devtools: emit performance entries only when profiling ([hoxyq](https://github.com/hoxyq) in [#33652](#33652)) * Get Server Component Function Location for Parent Stacks using Child's Owner Stack ([sebmarkbage](https://github.com/sebmarkbage) in [#33629](#33629)) * Added minimum indent size to Component Tree ([jsdf](https://github.com/jsdf) in [#33517](#33517)) * [devtools-shell] layout options for testing ([jsdf](https://github.com/jsdf) in [#33516](#33516)) * Remove feature flag enableRenderableContext ([kassens](https://github.com/kassens) in [#33505](#33505)) * refactor[devtools]: update css for settings and support css variables in shadow dom scnenario ([hoxyq](https://github.com/hoxyq) in [#33487](#33487)) * [mcp] Add MCP tool to print out the component tree of the currently open React App ([jorge-cab](https://github.com/jorge-cab) in [#33305](#33305)) * [scripts] Switch back to flow parser for prettier ([rickhanlonii](https://github.com/rickhanlonii) in [#33414](#33414)) * upgrade json5 ([rickhanlonii](https://github.com/rickhanlonii) in [#33358](#33358)) * Get source location from structured callsites in prepareStackTrace ([sebmarkbage](https://github.com/sebmarkbage) in [#33143](#33143)) * Clean up enableSiblingPrerendering flag ([jackpope](https://github.com/jackpope) in [#32319](#32319))

jorge-cab and others added 6 commits May 6, 2025 08:21

Bruteforcing react devtools

0e5c79c

Smarter Devtools integration

8fa3dfc

Port relevant logic from react devtools

a75932b

Port complete

76dddd1

Add component tree function to devtools and finish adding componentTr…

94718f1

…ee mcp tool

Merge remote-tracking branch 'origin/main' into component-tree-tool

2852c9d

facebook-github-bot added the CLA Signed label May 19, 2025

jorge-cab added 4 commits May 19, 2025 09:09

Cleanup React Devtools port attempt

26315d6

More cleanup

d6d929e

fix url redefinition

789e5f0

Error handling

a85b0b0

jorge-cab added 2 commits May 20, 2025 10:43

Add IS_INTERNAL build time flag and gate getComponentTree()

049bfbb

Add IS_INTERNAL build time flag and gate getComponentTree()

c5ab27a

jorge-cab requested review from hoxyq and poteto May 20, 2025 17:44

jorge-cab marked this pull request as ready for review May 20, 2025 17:46

Add IS_INTERNAL flag to eslintrc

1e4614b

hoxyq reviewed May 20, 2025

View reviewed changes

poteto approved these changes May 23, 2025

View reviewed changes

jorge-cab added 7 commits May 27, 2025 08:54

Address comments

ab86a5e

Error handling

81c3a53

Fix CI

183bd4f

Remove getComponentTree() definition gating

9cae1ce

Fix naming on react-devtools.js

9275c83

Fix tests

6c71a77

Remove unused code

df0a663

hoxyq approved these changes May 28, 2025

View reviewed changes

Gate __internal_only_getComponentTree definition

a586117

jorge-cab added 2 commits June 2, 2025 11:16

Fix lints

ecb1861

Fix flow

ca1d5e0

jorge-cab merged commit 2b4064e into main Jun 3, 2025
252 checks passed

eps1lon mentioned this pull request Jun 20, 2025

Upgrade React from 197d6a04-20250424 to 79d9aed7-20250620 vercel/next.js#79477

Merged

17 tasks

hoxyq mentioned this pull request Jun 27, 2025

React DevTools 6.1.2 -> 6.1.3 #33657

Merged

	const IS_INTERNAL = process.env.IS_INTERNAL === 'true';
	const IS_INTERNAL_MCP_BUILD = process.env.IS_INTERNAL_MCP_BUILD === 'true';

	__IS_INTERNAL__: IS_INTERNAL,
	__IS_INTERNAL_MCP_BUILD__: IS_INTERNAL_MCP_BUILD,

	__IS_INTERNAL__: 'readonly',
	__IS_INTERNAL_MCP_BUILD__: 'readonly',

	...(__IS_INTERNAL__ && {internal_only_getComponentTree}),
	...(__IS_INTERNAL_MCP_BUILD__ && {internal_only_getComponentTree}),

	function internal_only_getComponentTree(): string {
	function __internal_only_getComponentTree(): string {

	throw new Error('Localhost page not found');
	throw new Error(`Could not open the page at ${url}. Is your server running?`);

Conversation

jorge-cab commented May 19, 2025

Summary

How did you test this change?

Uh oh!

react-sizebot commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Critical size changes

Significant size changes

Uh oh!

jorge-cab commented May 20, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

poteto left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hoxyq left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Comments

react-sizebot commented May 19, 2025 •

edited

Loading