Provides tools to inspect and debug React applications, allowing AI agents to view component state, analyze re-rendering behavior, and investigate UI update issues in both web and React Native environments.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@react-devtools-mcpinspect the current state and props of the Counter component"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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-mcpOr manually:
cp node_modules/react-devtools-bridge/SKILL.md ~/.claude/skills/react-devtools/SKILL.mdUsage
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
Skill guide - When and how to use each tool
License
MIT
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.