react-devtools-bridge

Give AI agents eyes into your React app.

Setup

$3

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

$3

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

`

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

$3

Teach Claude when to use these tools:

`bash
npx add-skill skylarbarrera/react-devtools-mcp
`

Or manually:
`bash
cp node_modules/react-devtools-bridge/SKILL.md ~/.claude/skills/react-devtools/SKILL.md
``

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