Rn Devtools

CI npm version npm version License: MIT

An MCP server that gives Claude (or any MCP host) real-time access to your running React Native app — including your Redux state and AsyncStorage, with zero app changes. Console logs, errors, network, state, storage, action log, navigation, performance profiling, and more.

Why this one

• True zero-config state access. A runtime agent injected over the Chrome DevTools Protocol walks the React fiber tree to discover your Redux store — no SDK, no middleware, no exposing the store on a global. Reading AsyncStorage works the same way (native module proxy). Install the server, ask Claude about your state.
• Headless. No desktop app to keep open, no toggle to remember. Works in fully autonomous agent workflows and CI.
• Secrets redacted by default. Tokens, passwords, auth headers, and JWT-shaped strings are masked server-side before anything reaches the LLM (MCP_RN_NO_REDACT=1 to opt out).
• Built for agent loops. clear_buffers → reproduce → read. wait_for_log blocks until the app emits a matching log. get_state_diff shows exactly what changed between two moments.

How It Works

Claude / MCP Host
       │ MCP (stdio)
       ▼
  mcp-rn-devtools (server)
    ├── CDP WebSocket ──► RN App (Hermes / Metro)   ← zero config
    │     └── runtime agent (injected): Redux discovery,
    │         AsyncStorage, action log, navigation
    └── SDK WebSocket ◄── mcp-rn-devtools-sdk        ← optional enhancer

Layer 1 — CDP + runtime agent (zero config): Connects via Chrome DevTools Protocol through Metro's debugger proxy. Captures console logs, errors, warnings, and network requests, and injects a runtime agent that discovers Redux stores / React Navigation / React Query by walking the fiber tree, reads and writes AsyncStorage through the native module proxy, and records every dispatched action. Also provides JS evaluation, memory/CPU profiling, and source map resolution. No app changes needed.

Layer 2 — SDK (optional enhancer): Install mcp-rn-devtools-sdk for what the agent can't reach: Zustand/custom stores, MMKV, per-component render profiling, navigation timing, and a second capture channel that survives CDP drops.

Installation

With Claude Code

claude mcp add rn-devtools -- npx -y mcp-rn-devtools

Or add .mcp.json to your project root (shared with your team):

{
  "mcpServers": {
    "rn-devtools": {
      "command": "npx",
      "args": ["-y", "mcp-rn-devtools"]
    }
  }
}

With Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "rn-devtools": {
      "command": "npx",
      "args": ["-y", "mcp-rn-devtools"]
    }
  }
}

Manual

npm install -g mcp-rn-devtools

Quick Start

1. Start your React Native app — Metro must be running, Hermes engine (default since RN 0.70).
2. Add the MCP server to your Claude config (see above).
3. Ask Claude about your app:
   • "What's in my Redux store right now?"
   • "Read the AsyncStorage key persist:root"
   • "Clear the buffers, I'll reproduce the bug — then show me what happened"
   • "Dispatch auth/logout and show me the state diff"
   • "Profile the CPU for 3 seconds and show me the hot functions"

Available Tools

Source legend: agent = zero config, injected via CDP. CDP = zero config, protocol-level. SDK = requires mcp-rn-devtools-sdk in the app. Read-only tools are annotated with readOnlyHint so MCP hosts can auto-allow them.

State & Actions

Tool	Source	Description
get_app_state	agent + SDK	Redux store state with dot-path access and depth control. Stores discovered automatically
get_state_diff	agent + SDK	What changed in the store since the last call (baseline → diff workflow)
get_action_log	agent + SDK	Dispatched actions with duration and changed slices — recorded automatically, no middleware
dispatch_action	agent	Dispatch a Redux action to reproduce states or trigger flows

Storage

Tool	Source	Description
get_storage_keys	agent + SDK	List AsyncStorage (zero-config) or MMKV (SDK) keys with search
get_storage_value	agent + SDK	Read a storage value — secrets redacted by default

Logging & Errors

Tool	Source	Description
get_console_logs	CDP + SDK	Console output with level filter and search
get_errors	CDP + SDK	JS errors and exceptions with stack traces
get_warnings	CDP + SDK	LogBox warnings from console.warn
wait_for_log	CDP + SDK	Block until a log matching a pattern appears — synchronize with app activity

Network

Tool	Source	Description
get_network_requests	CDP + SDK	HTTP requests; verbose adds headers/bodies with secrets redacted
get_failed_requests	CDP + SDK	Requests with status >= 400 or network errors

Diagnostics

Tool	Source	Description
health_check	—	Connection status, discovered stores, counts — plus actionable diagnosis when disconnected
list_targets	—	Debuggable targets registered with Metro (multi-device)
select_target	—	Pin a specific target when several devices/apps are connected
clear_buffers	—	Reset captured data before reproducing a scenario

Navigation

Tool	Source	Description
get_navigation_state	agent + SDK	Current route and stack (React Navigation), discovered automatically
get_navigation_timing	SDK	Screen transition timing with per-route summary

Memory & Performance

Tool	Source	Description
get_memory_usage	CDP	Current heap usage (used / total / percentage)
take_heap_snapshot	CDP	Heap snapshot summary — object count, top retainers by size
get_cpu_profile	CDP	CPU profile for N seconds — hot functions sorted by self time
force_gc	CDP	Trigger garbage collection, return before/after heap comparison
get_render_profile	SDK	Component render events — mount/update durations, slow renders

Advanced

Tool	Source	Description
evaluate_js	CDP	Execute JavaScript in the app's global scope
resolve_source_location	CDP	Resolve bundled line:column to original source via Metro source maps

Secret Redaction

Every tool that outputs app data (state, storage values, network headers/bodies, action payloads) masks secrets server-side, before the data reaches the LLM:

• Values under sensitive keys (token, password, authorization, apiKey, session, cookie, …) → [REDACTED]
• JWT-shaped strings and Bearer … tokens anywhere in text → masked

Redaction is a blocklist (defence in depth, not a guarantee) — audit what your app stores before pointing any LLM at it. Opt out with MCP_RN_NO_REDACT=1.

SDK Setup (optional)

The runtime agent covers Redux, AsyncStorage, actions, and navigation with zero config. Install the SDK only if you need Zustand/custom stores, MMKV, render profiling, or navigation timing:

npm install mcp-rn-devtools-sdk --save-dev

import { RNDevtoolsProvider } from 'mcp-rn-devtools-sdk';

export default function App() {
  return (
    <RNDevtoolsProvider>
      <YourApp />
    </RNDevtoolsProvider>
  );
}

With Zustand / custom stores

const useAuthStore = create((set) => ({ /* ... */ }));

<RNDevtoolsProvider stateManagers={{ auth: useAuthStore }}>
  <YourApp />
</RNDevtoolsProvider>

State snapshots are pull-only: they're serialized only when a tool asks, so the SDK adds zero overhead while idle.

With MMKV

import { MMKV } from 'react-native-mmkv';
const storage = new MMKV();

<RNDevtoolsProvider mmkv={storage}>
  <YourApp />
</RNDevtoolsProvider>

Per-Component Render Profiling

import { RNDevtoolsProfiler } from 'mcp-rn-devtools-sdk';

<RNDevtoolsProfiler id="UserList">
  <UserList />
</RNDevtoolsProfiler>

Provider Props

Prop	Type	Description
navigationRef	RefObject	React Navigation container ref for richer route tracking
stateManagers	Record<string, StateStore>	Zustand/custom stores for state inspection
reduxMiddlewares	DevtoolsMiddleware[]	Middlewares created via createDevtoolsMiddleware()
asyncStorage	AsyncStorageLike	AsyncStorage instance (also available zero-config via agent)
mmkv	MMKVLike	MMKV instance for storage reading
port	number	WebSocket port (default: 8098)
host	string	Dev machine host — auto-detected from the bundle URL (SourceCode.scriptURL), works on emulators, physical devices, and adb reverse

The SDK automatically strips itself from production builds via __DEV__ checks — zero overhead in release.

Configuration

Environment Variable	Default	Description
METRO_PORT	8081	Metro bundler port
SDK_PORT	8098	SDK WebSocket port
MCP_RN_NO_REDACT	-	Disable secret redaction
MCP_RN_DEBUG	-	Enable debug logging

Architecture Notes

• Target selection: RN 0.76+ (Fusebox) no longer advertises vm: 'Hermes' — the server picks the main runtime by reactNative.capabilities.prefersFuseboxFrontend and skips secondary runtimes like Reanimated's. Legacy targets still work via the vm field.
• Kick-and-poll: CDP's awaitPromise can't resolve React Native's polyfilled Promises, so async in-app operations (AsyncStorage) fire a callback that writes to a result slot, which the server polls.
• Clock skew: log/error entries carry a server-clock receivedAt — device clocks can drift seconds from the host, which would break "wait for new logs" cuts.
• Reconnection: exponential backoff, agent re-injected automatically after every bundle reload.
• Action log caveat: the agent wraps store.dispatch at discovery time; components that captured a direct dispatch reference before discovery bypass the log (rare — discovery runs at connect).

Compatibility

• React Native: 0.71+ (validated against 0.80 / bridgeless / Fusebox)
• Engine: Hermes (default since RN 0.70)
• Platforms: iOS, Android
• Node.js: 20+
• MCP Hosts: Claude Code, Claude Desktop, or any MCP-compatible client

License

MIT