react-native-ai-devtools

What is react-native-ai-devtools?

An MCP server that gives AI assistants real-time access to a running React Native app. It bridges the gap between static code and live runtime, turning AI assistants from guessing machines into informed development partners.

This is not a debugger. This is not a QA tool. This is a Runtime AI Bridge.

Features

Runtime Interaction

• Console Log Capture
• React Component Inspection
• Network Request Tracking
• JavaScript Execution
• Global State Debugging
• Bundle Error Detection
• Debug Web Dashboard

Device Control

• iOS Simulator — screenshots, app management, URL handling
• Android Devices — screenshots, app install/launch, package management
• Unified Tap— fiber tree → accessibility → OCR → coordinates
• UI Automation — swipe, long press, text input, key events
• Accessibility Inspection
• OCR Text Extraction

Under the Hood

• Auto-Discovery
• Smart Device Selection
• Auto-Reconnection
• Efficient Buffering
• Platform Support — Expo SDK 54+, React Native 0.70+

Setup

Claude Code

claude mcp add rn-debugger --scope user -- npx react-native-ai-devtools

claude mcp add rn-debugger --scope project -- npx react-native-ai-devtools

VS Code Copilot (1.102+)

Add to .vscode/mcp.json:

{
  "servers": {
    "rn-debugger": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "react-native-ai-devtools"
      ]
    }
  }
}

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "rn-debugger": {
      "command": "npx",
      "args": [
        "-y",
        "react-native-ai-devtools"
      ]
    }
  }
}

Requirements

• Node.js 18+
• React Native app running with Metro bundler
• Optional: Facebook IDB for iOS UI automation

Available Tools

Connection & Logs

Network Tracking

App Inspection

React Component Inspection

UI Interaction

iOS Tools

Android Tools

Claude Code Skills

Pre-built workflows that combine multiple tools for common tasks:

Usage Examples

Quick Start

# 1. Start your React Native app
npx expo start

# 2. Ask your AI assistant:
"Connect to my running app and show me the component tree"
"Take a screenshot and describe what you see"
"Tap the Login button"
"Show me the last 10 network requests"

Log Inspection

# Ask your AI assistant:
"Search logs for errors in the last 5 minutes"
"Show me all network requests that failed"
"What warnings are in the console?"

Unified Tap

# The tap tool automatically finds elements:
tap(text="Submit")        # finds by visible text
tap(text="Login")         # tries fiber tree → accessibility → OCR
tap(x=200, y=400)         # direct coordinates as fallback

Supported Versions

Troubleshooting