React Native MCP Server
MCP server for React Native app automation and monitoring
Ask AI about React Native MCP Server
Powered by Claude Β· Grounded in docs
I know everything about React Native MCP Server. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
React Native MCP Server
MCP(Model Context Protocol) server for React Native app automation and monitoring. Works with Cursor, Claude Desktop, Claude Code, GitHub Copilot, Windsurf, and any MCP-compatible client.
What makes this different
- React Fiber tree access β Query and inspect components via the actual Fiber tree, not screenshots or accessibility labels
- State inspection β Read React hooks (useState, Zustand, etc.) of any component in real time
- Render profiling β Track mounts, re-renders, and unnecessary renders without React DevTools
- Network mocking β Intercept XHR/fetch and inject mock responses at runtime
- 49 MCP tools β Tap, swipe, screenshot, assert, eval, clear(target), and more across 12 categories
- Zero native module β Pure JS runtime + host CLI tools (adb/idb). No linking, no native code
- YAML E2E testing β Write scenarios in YAML and run in CI without AI
Documentation
| Guide | Description |
|---|---|
| Quick Start | 5-minute setup guide |
| Expo Guide | Expo-specific setup (Dev Client, Expo Go, Expo Router) |
| Tool Reference | All 49 tools with parameters and examples |
| Cookbook | Real-world usage scenarios |
| Architecture | How it works under the hood |
| Troubleshooting | Connection issues and fixes |
| VS Code Extension | DevTools + Component Tree in the sidebar |
| E2E Testing | YAML scenario testing |
Quick Start (CLI init)
The fastest way to set up React Native MCP in your project:
npx -y @ohah/react-native-mcp-server init
What it does
The init command runs through these steps:
Step 1 β Project Detection (automatic)
Reads package.json, lock files, and config files to detect:
- React Native version (
dependencies.react-native) - Expo (
dependencies.expo,app.json,app.config.ts) - Babel config location (
babel.config.js,.babelrc, etc.) - Package manager (
bun.lockβ bun,yarn.lockβ yarn,pnpm-lock.yamlβ pnpm, otherwise npm)
Detecting project...
β React Native 0.83.1
β Expo detected (expo@~52.0.0)
β Package manager: bun
Step 2 β MCP Client Selection (interactive prompt)
Asks which MCP client you use. This determines where the server config file is created.
? Which MCP client do you use?
1. Cursor
2. Claude Code (CLI)
3. Claude Desktop
4. Windsurf
5. Antigravity
> 1
| Client | Config location |
|---|---|
| Cursor | {project}/.cursor/mcp.json |
| Claude Code | claude mcp add CLI command |
| Claude Desktop | ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) |
| Windsurf | ~/.codeium/windsurf/mcp_config.json |
| Antigravity | ~/.gemini/antigravity/mcp_config.json |
Step 3 β Apply Changes (automatic)
- babel.config.js β Appends
@ohah/react-native-mcp-server/babel-presetto thepresetsarray. Skipped if already present. - MCP config β Creates or merges the server entry into the client config file. Existing settings are preserved.
- .gitignore β Appends
/results/if not already present.
Step 4 β Run your app and start using MCP tools
# Bare RN
npx react-native start
# Expo
npx expo start
Options
# Non-interactive mode β skip prompts, use Cursor as default client
npx -y @ohah/react-native-mcp-server init -y
# Specify client explicitly
npx -y @ohah/react-native-mcp-server init --client cursor
npx -y @ohah/react-native-mcp-server init --client claude-code
# Help
npx -y @ohah/react-native-mcp-server init --help
Running init multiple times is safe β each step checks if the change is already applied.
Monorepo: Run init from the repo root. It adds @ohah/react-native-mcp-server to the detected app packageβs devDependencies and runs install from the root. See CLI Init for options like --no-install.
Usage
Cursor
Add to .cursor/mcp.json:
{
"mcpServers": {
"react-native-mcp": {
"command": "npx",
"args": ["-y", "@ohah/react-native-mcp-server"]
}
}
}
Claude Desktop / Claude Code
# Claude Code CLI (recommended)
claude mcp add --transport stdio react-native-mcp -- npx -y @ohah/react-native-mcp-server
Or edit ~/Library/Application Support/Claude/claude_desktop_config.json with the same JSON structure.
GitHub Copilot CLI
Run /mcp add react-native-mcp in Copilot CLI, or edit ~/.copilot/mcp-config.json.
VS Code Extension (DevTools)
Install React Native MCP DevTools from the Marketplace, or in VS Code: Ctrl+Shift+X (Extensions) β search React Native MCP DevTools β Install. Gives you Console, Network, State, Renders, and Component Tree in the sidebar. See VS Code Extension for local .vsix install.
For detailed client setup, see Cursor / Claude / Copilot.
Required: Native Tools (idb / adb)
The MCP server uses idb (iOS) and adb (Android) for native touch injection and screenshots.
# Android
brew install --cask android-platform-tools # or install Android Studio
adb devices # verify
# iOS Simulator
brew tap facebook/fb && brew install idb-companion
pip3 install fb-idb
idb list-targets # verify
idb is macOS-only, simulators only. See idb Setup Guide for details.
Architecture
React Native App (iOS/Android)
β (WebSocket)
ββ Runtime (auto-injected via Babel preset)
β
MCP Server (developer's machine, port 12300)
β (stdio/MCP protocol)
Cursor / Claude Desktop / Copilot CLI
See Architecture for the full design.
Development
- Tools: mise (see
.mise.toml), oxlint/oxfmt for linting/formatting - Scripts:
bun run build- Build the serverbun run mcp- Run MCP serverbun run dev- Watch modebun run test- Run testsbun run test:mcp- Spawn server, callevaluate_scriptvia stdio
License
MIT Β© ohah
