React Native Upgrade Helper MCP Server

A Model Context Protocol (MCP) server that automates the React Native Upgrade Helper website to extract upgrade information between React Native versions.

What It Does

This MCP server uses Playwright to automatically:

1. Fill out the React Native Upgrade Helper form with your version details
2. Extract comprehensive upgrade information including file diffs
3. Return structured JSON data that AI assistants can use to help with React Native upgrades

Installation

1. Clone and install dependencies:

git clone <repository-url>
cd react-native-upgrade-helper-mcp
npm install

2. Install Playwright browser:

npx playwright install chromium

3. Build the project:

npm run build

Configuration

Add this server to your MCP client configuration:

Claude Code

Add to ~/.config/claude-code/mcp_servers.json:

{
  "mcpServers": {
    "react-native-upgrade-helper": {
      "command": "node",
      "args": ["/absolute/path/to/react-native-upgrade-helper-mcp/dist/index.js"]
    }
  }
}

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "react-native-upgrade-helper": {
      "command": "node",
      "args": ["/absolute/path/to/react-native-upgrade-helper-mcp/dist/index.js"]
    }
  }
}

Cursor

Add to your MCP settings:

{
  "servers": {
    "react-native-upgrade-helper": {
      "command": "node",
      "args": ["/absolute/path/to/react-native-upgrade-helper-mcp/dist/index.js"]
    }
  }
}

Important: Replace /absolute/path/to/react-native-upgrade-helper-mcp/ with the actual absolute path to this project directory.

Usage

The server provides two tools:

1. get_upgrade_info

Get comprehensive upgrade information between React Native versions.

Parameters:

• fromVersion (required): Source React Native version (e.g., "0.70.14")
• toVersion (required): Target React Native version (e.g., "0.74.0")
• packageName (optional): Package name (default: "com.example.app")
• projectName (optional): Project name (default: "ExampleApp")

Example:

@react-native-upgrade-helper get_upgrade_info fromVersion=0.70.14 toVersion=0.74.0

2. get_file_diff

Get specific file differences for the upgrade.

Parameters:

• fromVersion (required): Source React Native version
• toVersion (required): Target React Native version
• fileName (required): Specific file to get diff for (e.g., "package.json")
• packageName (optional): Package name (default: "com.example.app")
• projectName (optional): Project name (default: "ExampleApp")

Example:

@react-native-upgrade-helper get_file_diff fromVersion=0.70.14 toVersion=0.74.0 fileName=package.json

Example AI Prompts

Once configured, you can ask your AI assistant:

• "Help me upgrade my React Native app from 0.70.14 to 0.74.0. What changes do I need to make?"
• "Show me the specific changes needed for package.json when upgrading to RN 0.74.0"
• "What are the breaking changes when upgrading from React Native 0.70 to 0.74?"

Output Format

get_upgrade_info returns:

{
  "fromVersion": "0.70.14",
  "toVersion": "0.74.0",
  "packageName": "com.example.app",
  "projectName": "ExampleApp",
  "url": "https://react-native-community.github.io/upgrade-helper/",
  "summary": "Upgrade summary information",
  "breakingChanges": ["Breaking change descriptions"],
  "fileChanges": [
    {
      "fileName": "package.json",
      "changeType": "modified",
      "hasChanges": true,
      "content": "diff content..."
    }
  ],
  "totalFiles": 15,
  "modifiedFiles": 12,
  "addedFiles": 2,
  "deletedFiles": 1
}

get_file_diff returns:

{
  "fromVersion": "0.70.14",
  "toVersion": "0.74.0",
  "fileName": "package.json",
  "changeType": "modified", 
  "diff": "actual diff content...",
  "found": true
}

Development

# Run in development mode
npm run dev

# Build for production
npm run build

# Test the server manually
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {}}' | node dist/index.js

Troubleshooting

Playwright issues: Ensure Chromium is installed:

npx playwright install chromium

Permission errors: Make sure the script is executable:

chmod +x dist/index.js

Path issues: Always use absolute paths in MCP configuration files.

Network timeouts: The server waits 15 seconds for page loads. For slower connections, modify the timeout in src/index.ts.

License

MIT License