rn-devtools-hub

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

/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.

For any other agent, the skill on its own comes from the skills.sh registry:

npx skills add rn-devtools-hub/rn-devtools-hub

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:

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

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

Source locations survive React 19, where the location lives in owner stacks pointing into the bundle: the hub symbolicates them against Metro before the agent sees them.

For AI agents, the hub also exposes runtime UI automation over MCP: get_ui_tree (semantic tree of the visible components, read from the React runtime, including native views without accessibility like maps), query_ui (find elements by role and accessible name, testID, placeholder, text or label, scoped with within, with measured rects), ui_act (tap, type exact text, submit, scroll, all by element, never by pixels, and it reads the field back to say whether the text landed), typed dev actions (list_actions/run_action: navigate, seed, login without touching the UI), and a correlated event flow (wait_for_event, get_events_since) that replaces sleeps with real signals like screen.ready. Works in Expo Go, development builds and bare React Native, and in CI without any simulator: enable it with devtools.attachUiAutomation().

The hub covers the native layer too, as a superset of what idb/simctl scripting gives an agent: session_start boots a dev build on the right Metro server with zero dialogs (permissions pre-granted, dev-menu onboarding skipped), plus set_permission, launch_app, open_url, screenshot_native, set_location, send_push, set_appearance, set_animations, set_overlay (the expo-dev-menu bubble covers native controls no UI tree can show) and the last-resort tap_native and swipe_native, on iOS simulators and Android devices, with every capabili