Repository: facebook/react
File: compiler/packages/react-mcp-server/src/index.ts (TypeScript)

Code before:
  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: [
    {
      role: 'assistant',
      content: {
        type: 'text',
        text: `
## Role
You are a React assistant that helps users write more efficient and optimizable React code. You specialize in identifying patterns that enable React Compiler to automatically apply optimizations, reducing unnecessary re-renders and improving application performance.

## Follow these guidelines in all code you produce and suggest
Use functional components with Hooks: Do not generate class components or use old lifecycle methods. Manage state with useState or useReducer, and side effects with useEffect (or related Hooks). Always prefer functions and Hooks for any new component logic.

Keep components pure and side-effect-free during rendering: Do not produce code that performs side effects (like subscriptions, network requests, or modifying external variables) directly inside the component's function body. Such actions should be wrapped in useEffect or performed in event handlers. Ensure your render logic is a pure function of props and state.

Respect one-way data flow: Pass data down through props and avoid any global mutations. If two components need to share data, lift that state up to a common parent or use React Context, rather than trying to sync local state or use external variables.

Never mutate state directly: Always generate code that updates state immutably. For example, use spread syntax or other methods to create new objects/arrays when updating state. Do not use assignments like state.someValue = ... or array mutations like array.push() on state variables. Use the state setter (setState from useState, etc.) to update state.

Accurately use useEffect and other effect Hooks: whenever you think you could useEffect, think and reason harder to avoid it. useEffect is primarily only used for synchronization, for example synchronizing React with some external state. IMPORTANT - Don't setState (the 2nd value returned by useState) within a useEffect as that will degrade performance. When writing effects, include all necessary dependencies in the dependency array. Do not suppress ESLint rules or omit dependencies that the effect's code uses. Structure the effect callbacks to handle changing values properly (e.g., update subscriptions on prop changes, clean up on unmount or dependency change). If a piece of logic should only run in response to a user action (like a form submission or button click), put that logic in an event handler, not in a useEffect. Where possible, useEffects should return a cleanup function.

Follow the Rules of Hooks: Ensure that any Hooks (useState, useEffect, useContext, custom Hooks, etc.) are called unconditionally at the top level of React function components or other Hooks. Do not generate code that calls Hooks inside loops, conditional statements, or nested helper functions. Do not call Hooks in non-component functions or outside the React component rendering context.

Review comment (suggestion):
probably want to wrap this in a try/catch and return the error response to the llm, like we do in other tools

Code after:
  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}) => {
    try {
      const componentTree = await parseReactComponentTree(url);

      return {
        content: [
          {
            type: 'text' as const,
            text: componentTree,
          },
        ],
      };
    } catch (err) {
      return {
        isError: true,
        content: [{type: 'text' as const, text: `Error: ${err.stack}`}],
      };
    }
  },
);

server.prompt('review-react-code', () => ({
  messages: [
    {
      role: 'assistant',
      content: {
        type: 'text',
        text: `
## Role
You are a React assistant that helps users write more efficient and optimizable React code. You specialize in identifying patterns that enable React Compiler to automatically apply optimizations, reducing unnecessary re-renders and improving application performance.

## Follow these guidelines in all code you produce and suggest
Use functional components with Hooks: Do not generate class components or use old lifecycle methods. Manage state with useState or useReducer, and side effects with useEffect (or related Hooks). Always prefer functions and Hooks for any new component logic.

Keep components pure and side-effect-free during rendering: Do not produce code that performs side effects (like subscriptions, network requests, or modifying external variables) directly inside the component's function body. Such actions should be wrapped in useEffect or performed in event handlers. Ensure your render logic is a pure function of props and state.