Drive a running React Native or Expo app from inside its JS runtime: see, act, prove.
Quick Install
Automated & IDE SetupCopy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.
Manual Client & Custom JSON ConfigExpand JSON ▾
Client Config & Setup
Choose your client or environment
Target File:
💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.
Documentation Overview
rn-devtools-hub
The agent runtime for React Native. Your agent sees the app the way React sees it, knows which file produced each element, acts without coordinates, and proves that it works. Zero dependencies, no telemetry or usage counting, with a local hub and SDK.
Documentation · Quick start · Integration · Contributing
Use it from an agent
Both plugins install the MCP server plus a skill that teaches the agent to chain its tools: check the project context before debugging anything that looks impossible, prove results with assertions instead of screenshots, wait on events instead of sleeping, and read an element's source instead of grepping the repository.
Claude Code
Codex
Then start the hub at the root of your app, which is what the agent talks to:
Registering the server by hand works too. Claude Code:
Codex, in ~/.codex/config.toml:
Cursor has no marketplace, so it is two files in your own project.
Declare the server in .cursor/mcp.json:
And copy the rule, which is the Cursor equivalent of the skill:
It ships with alwaysApply: false, so Cursor pulls it in when the task
matches instead of paying for it on every request.
For any other agent, the skill on its own comes from the skills.sh registry:
It writes .agents/skills/rn-devtools-hub and links it into whichever
agents it detects, from Gemini CLI and Copilot to Windsurf and Zed. This
installs the skill only, so register the server as above and start the hub
to give the agent something to talk to.
Any client that speaks only stdio uses npx rn-devtools-hub mcp, which
bridges to the hub and starts it on demand.
When a testing or debugging task starts, the agent is instructed to announce
the project and its clickable dashboard URL, then continue automatically.
The hub supplies the actual bound port and current token, including when a
second project uses a fallback port. The link is also available in the
dashboard field of list_devices, get_project_context and session_start.
Screenshots
Overview: request counts, error rate, JS thread lag, connection and device at a glance
Network: colored methods, slow requests highlighted, foldable JSON, copy as cURL, secrets redacted before they leave the device
Mirror: the live device screen over adb, click to tap, drag to swipe, wheel to scroll, plus Back/Home/Recents/Dev menu
Tools: what the agent did and what the app did back, calls per tool split into answered / empty / failed, failures grouped by message, empty answers with the reason the tool gave, and the context each answer bills the agent
Why
The SDK lives inside the JavaScript runtime of your app.
The SDK executes directly alongside your application code. It reads React's tree, invokes handlers, instruments requests and reaches registered stores through APIs installed inside the app. The hub receives these capabilities over its own local connection, without requiring a debugger protocol session. Other tools can access runtime internals through protocols such as CDP; the hub's foundation is an explicit in-app SDK and its event contracts.
That position is what the whole product is built on. Everything else follows from it:
| The agent can | Because it is inside the runtime |
|---|---|
| Find an element by role and accessible name, then act on it | Actions go through the app's own props, not through pixels |
| Get the file and line that produced an element | The location lives in React's dev bookkeeping |
| Prove a step without a screenshot | A screenshot cannot show a request that failed silently |
| Tell a stale native build from a code problem | Only the runtime knows what the binary actually is |
| Freeze the clock and the network | Date and fetch are in the runtime |
| Put the app in an exact state without walking ten screens | Stores are reachable directly |
| Explain a visual regression, not just score it | The changed region maps back to the component that owns it |
A pure JavaScript SDK in the app (inert in production), a local hub in a single process, a dashboard in the browser. Zero dependencies anywhere, including the hub. The hub has no telemetry. MCP results are delivered to your agent and may be sent to its model provider. Configured store plugins contact their declared vendor endpoints.
Features
| Panel | What you see |
|---|---|
| Overview | KPI tiles, JS thread lag, HTTP statuses, duration distribution |
| Crashes | Fatal errors, JS errors, unhandled promise rejections, stacks |
| Network | Request/response inspector (colored methods, durations, sizes), copy as cURL, secrets redacted |
| Uploads | Live upload queue (if your app emits the events, see the protocol) |
| Cache | React Query snapshot: keys, statuses, freshness, data |
| Storage | AsyncStorage keys, sizes, values, live write timestamps |
| Screens | Navigation journey, time spent per screen |
| Logs | console.log/info/warn/error, colorized JSON, filters |
| SQLite | Read-only SQL console (SELECT/PRAGMA) on your app's database |
| Endpoints | Map of declared endpoints, calls, latencies |
| Actions | Buttons driving the app: reload, clear caches, your custom actions |
| Tests | Human-readable .hubflow scenarios, live replay progress, failure diagnosis, approved visual evidence and safe target repair candidates |
| Tools | What the agents do with this hub: calls per tool, failures with their message, empty answers and why, context bytes returned (pixels counted separately, because a session spending most of its context on screenshots is a session verifying the expensive way), selectors used, and the loop replayed against the app's own events |
| Plugins | The services around the app: App Store Connect and Google Play, what each one is configured with, whether it may change a release, and every host it will contact |
| Design | Icon, splash, fonts, sounds, identity (read from app.json and the assets) |
| Mirror | Live app screen (needs react-native-view-shot in the app), full Android via adb (tap, swipe, keyboard, Wi-Fi), iOS simulator via xcrun |
The Overview panel opens with the project context: what the project declares, what the app actually runs, and whatever the two disagree on. A stale native build is the most common way to lose an afternoon here, and it is named before you start reading code.
Plus: multi-device with merged sessions, bug report export in Markdown (ready for a GitHub issue), real-time capability badges, and a local MCP server to drive everything from Claude, Cursor or any MCP client.
See Hubflow scenarios to record an exploration, save it as a runtime regression test, replay it in CI and inspect its selected success or failure screenshots in the dashboard.
What an agent gets
Related MCP Servers
Reviews
No reviews yet — be the first to share how this listing worked for you.
Frequently Asked Questions about Rn Devtools Hub
AllMCPs Directory Badge
Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.
Badge Style:
Live Dynamic SVG Preview
Markdown (GitHub README)
[](https://allmcps.com/mcp/rn-devtools-hub)HTML Embed
<a href="https://allmcps.com/mcp/rn-devtools-hub"><img src="https://allmcps.com/api/badge/rn-devtools-hub?style=directory" alt="Rn Devtools Hub on AllMCPs" /></a>