react-devtools-bridge

Give AI agents eyes into your React app.

Setup

1. Add MCP server to Claude Code

.mcp.json:

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

2. Connect your React app

Web - Add to your HTML (before your app bundle):

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

React Native - DevTools is built-in. No extra setup needed.

3. (Optional) Install the skill

Teach Claude when to use these tools:

npx add-skill skylarbarrera/react-devtools-mcp

Or manually:

cp node_modules/react-devtools-bridge/SKILL.md ~/.claude/skills/react-devtools/SKILL.md

Related MCP server: React Native Debug MCP

Usage

With your React app running, ask Claude things like:

• "What's the current state of the Counter component?"

• "Why doesn't clicking this button update the UI?"

• "Which components are re-rendering too often?"

Docs

• All tools

• Skill guide - When and how to use each tool

License

MIT