Radon

MCP (Model Context Protocol) server for React Native debugging with Radon IDE integration.

Overview

This server provides tools for debugging React Native applications through Claude Code and other MCP-compatible clients. It auto-detects Radon IDE instances and provides direct access to Metro bundler logs, simulator screenshots, and simulator control.

Features

• Metro Logs: Access JavaScript console output via CDP WebSocket with filtering and pagination
• Screenshots: Capture compressed JPEG screenshots from iOS Simulator
• System Health: Diagnose Radon IDE and Metro bundler connectivity
• Simulator Control: Dark/light mode, status bar, URL/deeplinks, permissions, device info
• npm Package Info: Fetch package metadata and README from npm registry
• Documentation Links: Generate links to React Native and Expo documentation

Requirements

• macOS (uses xcrun simctl and sips for screenshots)
• Bun 1.0+
• Radon IDE with running iOS Simulator
• React Native application with Metro bundler

Installation

# Via npm (recommended)
npm install -g @noma4i/radon-mcp

# Or run directly with npx/bunx
npx @noma4i/radon-mcp
bunx @noma4i/radon-mcp

# From source
git clone https://github.com/noma4i/radon-mcp
cd radon-mcp
bun install
bun run build

Configuration

Add to your Claude Code MCP configuration (~/.claude.json or project .mcp.json):

{
  "mcpServers": {
    "radon": {
      "command": "bunx",
      "args": ["@noma4i/radon-mcp@latest"]
    }
  }
}

Or with npx:

{
  "mcpServers": {
    "radon": {
      "command": "npx",
      "args": ["@noma4i/radon-mcp@latest"]
    }
  }
}

Tools (11)

Debugging

view_screenshot

Captures the current screen of iOS Simulator as a compressed JPEG (max 800px, ~50-100KB).

{}

view_application_logs

Gets Metro bundler JS console logs via CDP WebSocket with filtering and pagination.

Parameter	Type	Description
filter	string	Regex pattern to grep log lines (case-insensitive)
last	number	Return last N lines after filtering

// All logs (first 50 + last 150 lines)
{}

// Last 50 lines
{last: 50}

// Filter errors
{filter: "error|Error"}

// Last 100 error lines
{filter: "error", last: 100}

check_system_health

Diagnoses Radon IDE and Metro bundler status. Returns system health as healthy, degraded, or unavailable.

{}

Simulator Control

open_url

Opens a URL or deeplink in the iOS Simulator.

Parameter	Type	Description
url	string	URL or deeplink to open (required)

{url: "myapp://profile/123"}
{url: "https://example.com"}

set_appearance

Switches iOS Simulator between dark and light mode.

Parameter	Type	Description
mode	string	dark or light (required)

{mode: "dark"}

set_status_bar

Overrides iOS Simulator status bar for consistent screenshots.

Parameter	Type	Description
time	string	Time to display (e.g., "9:41")
batteryLevel	number	Battery percentage (0-100)
cellularBars	number	Cellular signal bars (0-4)
wifiBars	number	WiFi signal bars (0-3)

{time: "9:41", batteryLevel: 100, wifiBars: 3}

clear_status_bar

Resets iOS Simulator status bar to default values.

{}

set_privacy

Grants or revokes app permissions in iOS Simulator.

Parameter	Type	Description
action	string	grant, revoke, or reset (required)
service	string	Permission service: camera, photos, location, microphone, etc. (required)
bundleId	string	App bundle identifier (required)

{action: "grant", service: "camera", bundleId: "com.mycompany.myapp"}

get_device_info

Returns information about the current iOS Simulator device (name, UDID, runtime, state).

{}

Documentation

get_library_description

Fetches npm package information including metadata, dependencies, and README.

Parameter	Type	Description
library_npm_name	string	npm package name (required)
readmeLimit	number	Max README characters (default: 5000)

{library_npm_name: "react-native-reanimated"}
{library_npm_name: "expo-camera", readmeLimit: 1000}

query_documentation

Generates links to React Native or Expo documentation.

Parameter	Type	Description
text	string	Search query (required)
source	string	react-native, expo, or both (default)

{text: "flatlist"}
{text: "camera", source: "expo"}

Debugging Workflow

0. check_system_health - Verify Radon IDE and Metro connectivity
1. view_screenshot - See current UI state
2. view_application_logs - Check JS console for errors
3. Fix code
4. Repeat from step 1

Development

# Build
bun run build

# Run tests
bun test

# Start server
bun run start

Testing

bun test

CI runs on GitHub Actions (macos-latest with Bun).

Architecture

Claude Code <--MCP/stdio--> radon-mcp
                              |
         +--------------------+--------------------+
         |                    |                    |
         v                    v                    v
    npm registry        xcrun simctl         Metro CDP/HTTP

The server auto-detects:

• Device ID: from simulator-server-macos process
• Device Set: Radon IDE Devices directory
• Metro Port: from process or port scan (8081, 50377)

Output Format

All tools return MCP-compatible content:

// Text response
{
  content: [{ type: 'text', text: '...' }];
}

// Image response (screenshots)
{
  content: [{ type: 'image', data: 'base64...', mimeType: 'image/jpeg' }];
}

Log responses include a summary header:

[matched 42 of 1000, last 100 of 42 lines]

<log content>

License

MIT