rn-devtools-hub

<p align="center"> <img src="assets/logo.svg" width="120" alt="rn-devtools-hub"> </p> <h1 align="center">rn-devtools-hub</h1> <p align="center"> 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, everything stays on your machine. </p> <p align="center"> <a href="https://rn-devtools-hub.github.io/rn-devtools-hub/">Documentation</a> · <a href="#quick-start">Quick start</a> · <a href="#integration-guide">Integration</a> · <a href="#contributing">Contributing</a> </p>

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

/plugin marketplace add rn-devtools-hub/rn-devtools-hub
/plugin install rn-devtools-hub

Codex

codex plugin marketplace add rn-devtools-hub/rn-devtools-hub
codex plugin add rn-devtools-hub

Then start the hub at the root of your app, which is what the agent talks to:

npx rn-devtools-hub

Registering the server by hand works too. Claude Code:

claude mcp add rn-devtools --transport http http://127.0.0.1:8973/mcp

Codex, in ~/.codex/config.toml:

[mcp_servers.rn-devtools]
url = "http://127.0.0.1:8973/mcp"

Cursor has no marketplace, so it is two files in your own project. Declare the server in .cursor/mcp.json:

{
  "mcpServers": {
    "rn-devtools": { "type": "http", "url": "http://127.0.0.1:8973/mcp" }
  }
}

And copy the rule, which is the Cursor equivalent of the skill:

mkdir -p .cursor/rules
cp node_modules/rn-devtools-hub/templates/cursor-rule.mdc \
   .cursor/rules/rn-devtools-hub.mdc

It ships with alwaysApply: false, so Cursor pulls it in when the task matches instead of paying for it on every request.

Any client that speaks only stdio uses npx rn-devtools-hub mcp, which bridges to the hub and starts it on demand.

Screenshots

<p align="center"> <img src="assets/screenshots/overview.png" alt="Overview panel: KPI tiles, JS thread lag, HTTP statuses and request durations"> <em>Overview: request counts, error rate, JS thread lag, connection and device at a glance</em> </p> <p align="center"> <img src="assets/screenshots/network.png" alt="Network panel: request list with colored methods and a foldable JSON response"> <em>Network: colored methods, slow requests highlighted, foldable JSON, copy as cURL, secrets redacted before they leave the device</em> </p> <p align="center"> <img src="assets/screenshots/mirror.png" alt="Mirror panel: live Android screen with tap, swipe and key controls"> <em>Mirror: the live device screen over adb, click to tap, drag to swipe, wheel to scroll, plus Back/Home/Recents/Dev menu</em> </p>

Why

The SDK lives inside the JavaScript runtime of your app.

An accessibility-driven tool sees what the OS exposes. A WebDriver-driven one sees a black box. An IDE inspector sees the tree but will not act on it. None of them can read a component's props, call a handler, intercept a request or write to a store, because none of them is inside.

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