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-mcp
Give AI agents eyes into your React app.
Setup
1. Add MCP server to Claude Code
.mcp.json:
2. Connect your React app
Web - Add to your HTML (before your app bundle):
React Native - DevTools is built-in. No extra setup needed.
3. (Optional) Install the skill
Teach Claude when to use these tools:
Or manually:
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
Skill guide - When and how to use each tool
License
MIT