#Install & connect

To use React Native MCP you need the MCP server, client configuration, app setup, and native tools (idb / adb).

#1. Install the MCP server

Global install (npm, pnpm, bun, yarn, deno):

npm install -g @ohah/react-native-mcp-server

yarn add -g @ohah/react-native-mcp-server

pnpm add -g @ohah/react-native-mcp-server

bun add -g @ohah/react-native-mcp-server

deno add -g npm:@ohah/react-native-mcp-server

Run without installing (npx, pnpx, bunx, etc.):

npx -y @ohah/react-native-mcp-server

Cursor, Claude, and Copilot configs typically use the run-without-install approach.

#2. Register the server in your client

Register the MCP server in your AI client.

• Cursor: See Using MCP — Cursor
• Claude Desktop: See Using MCP — Claude Desktop
• GitHub Copilot CLI: See Using MCP — Copilot CLI

#3. React Native app setup

The app must use the Babel preset and enable the MCP runtime in the app entry so the MCP server can communicate with it. For console/network tools, run Metro as usual (the MCP server connects to Metro’s debugger; no Metro config change is required).

#Babel preset

Add the preset in babel.config.js (AppRegistry wrapping, testID injection):

module.exports = {
  presets: ['module:@react-native/babel-preset', '@ohah/react-native-mcp-server/babel-preset'],
};

To apply only in development:

const isDev = process.env.NODE_ENV !== 'production';
const mcpPreset = isDev ? ['@ohah/react-native-mcp-server/babel-preset'] : [];
module.exports = {
  presets: ['module:@react-native/babel-preset', ...mcpPreset],
};

#Render highlight (optional)

Visual re-render highlighting draws colored overlays on components when they re-render. You can enable it at app load via the Babel preset option. Default style is 'react-mcp' (cyan #61dafb, matches DevTools icon).

Example:

module.exports = {
  presets: [
    'module:@react-native/babel-preset',
    ['@ohah/react-native-mcp-server/babel-preset', { renderHighlight: true }],
  ],
};

#4. Native tools (idb / adb)

Tap, swipe, screenshots, etc. use idb (iOS) and adb (Android). You must install them.

#Android — adb

• Included with Android Studio
• Standalone: brew install --cask android-platform-tools (macOS)
• Verify: adb devices

#iOS simulator — idb

Install idb (iOS Development Bridge):

brew tap facebook/fb && brew install idb-companion
pip3 install fb-idb

Verify: idb list-targets

idb is macOS-only and supports simulators. Physical devices need separate setup.

#5. Verify

1. Start Metro (bun run start or npm start)
2. Run the app in the iOS simulator or Android emulator
3. In Cursor (or your client), confirm MCP is connected and tools like snapshot and tap work

If something fails, see the troubleshooting section in Using MCP or the repo issues.