react-devtools-mcp
# react-devtools-bridge
Give AI agents eyes into your React app.
## Setup
### 1. Add MCP server to Claude Code
`.mcp.json`:
```json
{
"mcpServers": {
"react-devtools": {
"command": "npx",
"args": ["react-devtools-bridge"]
}
}
}
```
### 2. Connect your React app
**Web** - Add to your HTML (before your app bundle):
```html
<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:
```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](TOOLS.md)
- [Skill guide](SKILL.md) - When and how to use each tool
## License
MIT
TDQS
Scored across 45 tools
The tools cover distinct operations like connection management, inspection, and overrides, but there is some overlap in purpose. For example, 'get_element_by_id' and 'inspect_element' both retrieve element info, and 'get_profiling_data' vs 'stop_profiling' could cause confusion. Descriptions help differentiate, but the high count increases ambiguity.
Most tools follow a clear verb_noun pattern (e.g., 'capture_screenshot', 'clear_errors_and_warnings'), with consistent snake_case throughout. Minor deviations exist, such as 'log_to_console' using 'to' instead of a direct verb, but overall naming is predictable and readable.
With 45 tools, the count is excessive for a React DevTools server, making it heavy and potentially overwhelming. While the domain is broad, many tools could be consolidated or omitted without losing functionality, indicating poor scoping.
The tool set provides comprehensive coverage for React DevTools operations, including connection management, component inspection, profiling, overrides, and debugging features. There are no obvious gaps; it supports full CRUD-like actions and lifecycle management for the domain.