mcp-rn-devtools

An MCP server that gives Claude (or any MCP host) real-time access to your running React Native app — console logs, errors, network, state, storage, performance profiling, and more. Zero config for basics, optional SDK for full power.

How It Works

Claude / MCP Host
       │ MCP (stdio)
       ▼
  mcp-rn-devtools (server)
    ├── CDP WebSocket ──► RN App (Hermes / Metro)   ← zero config
    └── SDK WebSocket ◄── mcp-rn-devtools-sdk        ← optional, in-app

Layer 1 — CDP (zero config): Connects to your app via Chrome DevTools Protocol through Metro's debugger proxy. Captures console logs, errors, warnings, network requests, and provides JS evaluation, memory profiling, CPU profiling, and source map resolution. No app changes needed.

Layer 2 — SDK (optional): Install mcp-rn-devtools-sdk in your app for navigation state, Redux/Zustand state inspection, AsyncStorage/MMKV reading, render profiling, and more reliable console/error capture through a dual-channel architecture.

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 errors is my app showing?"

   • "Show me the recent network requests"

   • "What's the current navigation state?"

   • "Profile the CPU for 3 seconds and show me the hot functions"

Available Tools

Logging & Errors

Network

Memory & Performance

Navigation

State & Storage

Render Profiling

Advanced

Source legend: CDP = works without SDK (zero config). SDK = requires the SDK installed in the app. CDP + SDK = dual-channel, captures from both sources.

SDK Setup

Install the SDK for navigation, state, storage, render profiling, and more reliable log/error capture:

npm install mcp-rn-devtools-sdk --save-dev
# or
yarn add mcp-rn-devtools-sdk --dev

Basic Usage

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

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

With Navigation (React Navigation)

import { RNDevtoolsProvider } from 'mcp-rn-devtools-sdk';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';

export default function App() {
  const navigationRef = useNavigationContainerRef();

  return (
    <RNDevtoolsProvider navigationRef={navigationRef}>
      <NavigationContainer ref={navigationRef}>
        <YourNavigator />
      </NavigationContainer>
    </RNDevtoolsProvider>
  );
}

With State Inspection (Redux / Zustand)

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

// Redux — create middleware before store
const devtoolsMiddleware = createDevtoolsMiddleware('main');
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefault) => getDefault().concat(devtoolsMiddleware),
});

// Zustand — pass store directly
const useAuthStore = create((set) => ({ /* ... */ }));

export default function App() {
  return (
    <RNDevtoolsProvider
      stateManagers={{ redux: store, auth: useAuthStore }}
      reduxMiddlewares={[devtoolsMiddleware]}
    >
      <YourApp />
    </RNDevtoolsProvider>
  );
}

With Storage

import AsyncStorage from '@react-native-async-storage/async-storage';
import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

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

Per-Component Render Profiling

The SDK automatically tracks renders at the root level. For per-component granularity:

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

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

Provider Props

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

Configuration

Architecture

The server uses two communication channels:

• CDP (Chrome DevTools Protocol): Connects through Metro's inspector proxy (/json endpoint) to the Hermes engine. Provides console events, JS evaluation, heap/CPU profiling, and source maps. The server calls Debugger.enable to transition Hermes from RunningDetached to Running state, then Runtime.enable for console event capture. Reconnects automatically with exponential backoff if the connection drops.

• SDK WebSocket: A lightweight bridge running on a separate port. The React Native SDK sends console logs, errors, network requests, navigation state, render events, state snapshots, and storage data. This provides a reliable second channel — if CDP drops, the SDK channel keeps working.

Both channels feed into shared managers (LogManager, ErrorManager, NetworkManager, etc.), and tools query these managers regardless of which channel provided the data.

Compatibility

• React Native: 0.71+

• 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