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

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

@@ -21,6 +21,7 @@ import {queryAlgolia} from './utils/algolia';
 import assertExhaustive from './utils/assertExhaustive';
 import {convert} from 'html-to-text';
 import {measurePerformance} from './tools/runtimePerf';
+import {parseReactComponentTree} from './tools/componentTree';
 
 function calculateMean(values: number[]): string {
   return values.length > 0
@@ -366,6 +367,38 @@ ${calculateMean(results.renderTime)}
   },
 );
 
+server.tool(
+  'parse-react-component-tree',
+  `
+  This tool gets the component tree of a React App.
+  passing in a url will attempt to connect to the browser and get the current state of the component tree. If no url is passed in,
+  the default url will be used (http://localhost:3000).
+
+  <requirements>
+  - The url should be a full url with the protocol (http:// or https://) and the domain name (e.g. localhost:3000).
+  - Also the user should be running a Chrome browser running on debug mode on port 9222. If you receive an error message, advise the user to run
+  the following comand in the terminal:
+  MacOS: "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome"
+  Windows: "chrome.exe --remote-debugging-port=9222 --user-data-dir=C:\temp\chrome"
+  </requirements>
+  `,
+  {
+    url: z.string().optional().default('http://localhost:3000'),
+  },
+  async ({url}) => {
+    const componentTree = await parseReactComponentTree(url);
+
+    return {
+      content: [
+        {
+          type: 'text' as const,
+          text: componentTree,
+        },
+      ],
+    };
+  },
+);
+
 server.prompt('review-react-code', () => ({
   messages: [
     {

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

@@ -0,0 +1,36 @@
+import puppeteer from 'puppeteer';
+
+export async function parseReactComponentTree(url: string): Promise<string> {
+  try {
+    const browser = await puppeteer.connect({
+      browserURL: 'http://127.0.0.1:9222',
+      defaultViewport: null,
+    });
+
+    const pages = await browser.pages();
+
+    let localhostPage = null;
+    for (const page of pages) {
+      const pageUrl = await page.url();
+
+      if (pageUrl.startsWith(url)) {
+        localhostPage = page;
+        break;
+      }
+    }
+
+    if (localhostPage) {
+      const componentTree = await localhostPage.evaluate(() => {
+        return (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces
+          .get(1)
+          .getComponentTree();
+      });
+
+      return componentTree;
+    } else {
+      throw new Error('Localhost page not found');
+    }
+  } catch (error) {
+    throw new Error('Failed extract component tree' + error);
+  }
+}

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';
+
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
 const babelOptions = {
@@ -113,6 +115,7 @@ module.exports = {
       __IS_FIREFOX__: IS_FIREFOX,
       __IS_EDGE__: IS_EDGE,
       __IS_NATIVE__: false,
+      __IS_INTERNAL__: IS_INTERNAL,
       __IS_INTERNAL_VERSION__: IS_INTERNAL_VERSION,
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,

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

@@ -5859,6 +5859,79 @@
     return unresolvedSource;
   }
 
+  function internal_only_getComponentTree(): string {
+    let treeString = '';
+
+    function buildTreeString(
+      instance: DevToolsInstance,
+      prefix: string = '',
+      isLastChild: boolean = true,
+    ): void {
+      if (!instance) return;
+
+      const name =
+        (instance.kind !== VIRTUAL_INSTANCE
+          ? getDisplayNameForFiber(instance.data)
+          : instance.data.name) || 'Unknown';
+
+      const id = instance.id !== undefined ? instance.id : 'unknown';
+
+      if (name !== 'createRoot()') {
+        treeString +=
+          prefix +
+          (isLastChild ? '└── ' : '├── ') +
+          name +
+          ' (id: ' +
+          id +
+          ')\n';
+      }
+
+      const childPrefix = prefix + (isLastChild ? '    ' : '│   ');
+
+      let childCount = 0;
+      let tempChild = instance.firstChild;
+      while (tempChild !== null) {
+        childCount++;
+        tempChild = tempChild.nextSibling;
+      }
+
+      let child = instance.firstChild;
+      let currentChildIndex = 0;
+
+      while (child !== null) {
+        currentChildIndex++;
+        const isLastSibling = currentChildIndex === childCount;
+        buildTreeString(child, childPrefix, isLastSibling);
+        child = child.nextSibling;
+      }
+    }
+
+    const rootInstances: Array<DevToolsInstance> = [];
+    idToDevToolsInstanceMap.forEach(instance => {
+      if (
+        instance.parent === null ||
+        (instance.parent.kind === FILTERED_FIBER_INSTANCE &&
+          instance.parent.parent === null)
+      ) {
+        rootInstances.push(instance);
+      }
+    });
+
+    if (rootInstances.length > 0) {
+      for (let i = 0; i < rootInstances.length; i++) {
+        const isLast = i === rootInstances.length - 1;
+        buildTreeString(rootInstances[i], '', isLast);
+        if (!isLast) {
+          treeString += '\n';
+        }
+      }
+    } else {
+      treeString = 'No component tree found.';
+    }
+
+    return treeString;
+  }
+
   return {
     cleanup,
     clearErrorsAndWarnings,
@@ -5873,6 +5946,7 @@
     getNearestMountedDOMNode,
     getElementIDForHostInstance,
     getInstanceAndStyle,
+    ...(__IS_INTERNAL__ && {internal_only_getComponentTree}),
     getOwnersList,
     getPathForElement,
     getProfilingData,

scripts/flow/react-devtools.js

@@ -16,5 +16,6 @@ declare const __IS_FIREFOX__: boolean;
 declare const __IS_CHROME__: boolean;
 declare const __IS_EDGE__: boolean;
 declare const __IS_NATIVE__: boolean;
+declare const __IS_INTERNAL__: boolean;
 
 declare const chrome: any;