metro-mcp: React Native debugging through an agent
metro-mcp
An MCP server for React Native debugging: logs, network, Redux state and the component tree from Metro, plus simulator control
- 89 ★ on the repository
- Last commit
- MIT
Broad access
Why this level
- The tool runs JavaScript in the app and can dispatch Redux actions and control the device
- It reads AsyncStorage and sandbox files, which may hold tokens and user data
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/metro-mcpDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewBroad accessThe tool can change data, run commands or handle secrets.
- The tool runs JavaScript in the app and can dispatch Redux actions and control the device
- It reads AsyncStorage and sandbox files, which may hold tokens and user data
This is third-party code. Review the repository files before installing.
What it does
metro-mcp connects to a running Metro server the same way Chrome DevTools does: it finds Metro on ports 8081, 8082 and 19000 to 19002 and connects to Hermes over the Chrome DevTools Protocol. Most features need no app code changes. It works with Expo, bare React Native and any project on Metro and Hermes. The server is built from plugins. They include console logs, network requests with response bodies, runtime and bundle errors, the component tree, Redux state, AsyncStorage reading, app sandbox files, React Navigation and Expo Router state, accessibility audits, a profiler and JavaScript execution in the app. It also controls devices: the iOS simulator and Android emulator, taps and swipes, deep links and permissions. A test recorder plugin turns interactions into Appium, Maestro or Detox tests.
Who it is for. React Native developers debugging an app with Claude Code, Codex, Cursor or OpenCode who want the agent to see logs, network and state.
Good fit when
- The app crashes and the agent must read runtime errors and a symbolicated stack
- You need to find which request returned a wrong response from the network plugin's bodies
- You want to reproduce a flow: open a deep link, tap buttons and record a test for Maestro
- You are checking Redux state before and after a user action
Not a fit when
- The app is not on Hermes: you need React Native 0.70 or newer with the Hermes engine
- You need a debugger with breakpoints: the server reads and controls but does not replace stepping
- The agent works on a production build: JavaScript execution and device control are meant for development
Example request
Connect to Metro, show the latest errors and network requests with status 500, and open the profile screen by deep link.MCP
- Transport
- stdio
- Authentication
- not required
Limitations
Node.js 18 or Bun 1.0 is required, Xcode 14 or later with Simulator for iOS and the Android SDK with `adb` on PATH for Android. Some iOS operations fall back to IDB when needed: `brew install idb-companion`, and the tools tell you when it is needed. Compatibility: React Native 0.70 and up with Hermes, Expo SDK 49 and newer.
A standard install starts or reuses a shared local daemon for one project directory, so Codex, Claude Code and Cursor connect at the same time. The coordinate-based component inspection tool is marked experimental by the author.
How to disable. Remove the server with `claude mcp remove metro-mcp` or delete the entry from the Codex, Cursor and OpenCode configs. The shared local daemon stops once the project's clients are closed.
FAQ
How do I install metro-mcp in Claude Code?
Run `claude mcp add metro-mcp -- npx -y metro-mcp`. The Bun variant is `claude mcp add metro-mcp -- bunx metro-mcp`.
Do I need to change the app code?
For most features no: the server connects to Metro and Hermes like Chrome DevTools. Extra integration is described as optional.
Does it work with Expo?
Yes, with Expo SDK 49 and newer, bare React Native 0.70 and newer and any project on Metro and Hermes.
Which tests can it record?
The test recorder plugin turns interactions into tests for Appium, Maestro and Detox.
Can several clients be used at once?
Yes. Codex, Claude Code, Cursor and others connect to one shared local daemon for the same project directory.
Discussion
No questions or reviews yet.
Related
MCP serversAn MCP server for a running React Native app: logs, network, state, screenshots and taps, so an agent verifies fixes on a device
A transparent proxy between an AI client and an MCP server: shows every JSON-RPC frame in the terminal, checks a capture in CI and exports spans
An MCP server for the Node.js debugger: breakpoints, stepping, variable inspection and expression evaluation at a pause
A debugger with no IDE: an agent sets breakpoints, steps through code and inspects variables in ten languages
A plugin with skills for building TypeScript MCP servers and MCP apps: the agent scaffolds, edits, debugs and verifies them
The openmcp CLI and a VS Code extension for debugging MCP servers: tools, prompts and resources, chat with a model, test cases
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| metro-mcp: React Native debugging through an agent (this card) | no | not required | 89 | |
| Mobile MCP | no | not required | 10,529 | controls devices at the UI level without access to the JS runtime |
| Appium MCP | yes | not required | 518 | runs Appium scenarios and does not read Metro logs |
| Chrome DevTools MCP | yes | not required | 55,199 | debugs web pages in Chrome |
README in short
The README opens with installation for Claude Code, Codex, OpenCode and Cursor, then explains how it connects to Metro and lists plugins with tool counts. It separately covers Chrome DevTools alongside MCP, the Claude Code status bar, test recording, app integration, configuration and custom plugins.