React DevTools

Provides an MCP server to expose React DevTools data to Claude for debugging and analysis.

javascript

0

GitHub Stars

javascript

Language

4 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "skylarbarrera-react-devtools-mcp": {
      "command": "npx",
      "args": [
        "react-devtools-bridge"
      ]
    }
  }
}

You enable Claude to observe and interact with your React app by wiring up a dedicated MCP server that exposes React DevTools data. This bridge lets AI agents inspect component state, render behavior, and re-render timing to assist debugging and analysis.

How to use

With the MCP server configured, you can run your React app and connect Claude-based tools to it. Use practical prompts like asking about the current state of a component, why a UI element isn’t updating, or which components re-render too often. The bridge provides the visibility and control needed to diagnose UI issues across web and React Native projects.

How to install

Prerequisites: ensure you have Node.js and npm installed on your development machine.

Step 1: Create the MCP server configuration in your project. Add or update a file named .mcp.json with the following content to register the React DevTools MCP server.

{
  "mcpServers": {
    "react-devtools": {
      "command": "npx",
      "args": ["react-devtools-bridge"]
    }
  }
}

Step 2: Connect your React app to the bridge. If you are serving a web app, insert this script tag into your HTML before loading your app bundle.

<script src="http://localhost:8097"></script>

React Native apps use the built‑in DevTools, so no extra setup is required for that target.

Step 3: (Optional) Install the Claude skill for automatic tool usage. Run this to add the skill package, which teaches Claude when to invoke the MCP bridge.

npx add-skill skylarbarrera/react-devtools-mcp

Or copy the skill file manually if you prefer.

## Notes

The bridge is designed to run alongside your React app. When you start your app, Claude can query the bridge to inspect components, track props and state changes, and identify performance issues. Ensure your development server is accessible at the address configured in your setup, and that any network restrictions allow communications required by Claude’s tools.

## Troubleshooting and tips

If Claude cannot connect, double‑check that the MCP server is registered in your configuration and that the React DevTools bridge process is running. Verify there are no firewall rules blocking local connections and that the bridge URL or port (if customized) matches your environment.

## Available tools

### react\_devtools\_mcp

Bridge tool to connect Claude with the React DevTools MCP bridge, enabling component inspection and render-trace analysis.