[mcp] Add MCP tool to print out the component tree of the currently open React App #33305

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...1e4614b

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 1e4614b

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

@@ -33,6 +33,8 @@ const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
 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

@@ -113,6 +115,7 @@ module.exports = {
      __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

@@ -504,6 +505,7 @@ module.exports = {
        __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

@@ -5873,6 +5946,7 @@ export function attach(
    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

@@ -5859,6 +5859,79 @@ export function attach(
    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 { ... } }

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, ...

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 2 commits May 19, 2025 09:09

Cleanup React Devtools port attempt

26315d6

More cleanup

d6d929e

kushxg mentioned this pull request May 19, 2025

Mirror of upstream PR #33305 kushxg/react-mirror#69

Open

jorge-cab added 2 commits May 19, 2025 11:16

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[mcp] Add MCP tool to print out the component tree of the currently open React App #33305

[mcp] Add MCP tool to print out the component tree of the currently open React App #33305

jorge-cab commented May 19, 2025

react-sizebot commented May 19, 2025 •

edited

Loading

jorge-cab commented May 20, 2025

hoxyq May 20, 2025

hoxyq May 20, 2025

hoxyq May 20, 2025

hoxyq May 20, 2025

hoxyq May 20, 2025

hoxyq May 20, 2025

hoxyq May 20, 2025

hoxyq May 20, 2025

hoxyq May 20, 2025

hoxyq May 20, 2025

hoxyq May 20, 2025

hoxyq May 20, 2025

	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 {

[mcp] Add MCP tool to print out the component tree of the currently open React App #33305

Are you sure you want to change the base?

[mcp] Add MCP tool to print out the component tree of the currently open React App #33305

Conversation

jorge-cab commented May 19, 2025

Summary

How did you test this change?

react-sizebot commented May 19, 2025 • edited Loading

Critical size changes

Significant size changes

jorge-cab commented May 20, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

react-sizebot commented May 19, 2025 •

edited

Loading