{"id":47717123,"url":"https://github.com/steve228uk/metro-mcp","last_synced_at":"2026-08-27T18:27:12.842Z","repository":{"id":347749163,"uuid":"1194097289","full_name":"steve228uk/metro-mcp","owner":"steve228uk","description":"🚇 A plugin-based MCP server for React Native runtime debugging, inspection, and automation. Connects to Metro bundler via Chrome DevTools Protocol — no app code changes needed for most features.","archived":false,"fork":false,"pushed_at":"2026-07-29T17:27:06.000Z","size":1324,"stargazers_count":74,"open_issues_count":3,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-08-08T05:56:00.453Z","etag":null,"topics":["agentic-ai","cdp","chrome-devtools-protocol","debugger","debugging","expo","hermes","llm","mcp","mcp-server","react-native"],"latest_commit_sha":null,"homepage":"https://metromcp.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steve228uk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null,"disclosure":null}},"created_at":"2026-03-27T23:14:23.000Z","updated_at":"2026-08-04T19:41:31.000Z","dependencies_parsed_at":"2026-06-02T10:02:44.200Z","dependency_job_id":null,"html_url":"https://github.com/steve228uk/metro-mcp","commit_stats":null,"previous_names":["steve228uk/metro-mcp"],"tags_count":35,"template":false,"template_full_name":null,"purl":"pkg:github/steve228uk/metro-mcp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steve228uk%2Fmetro-mcp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steve228uk%2Fmetro-mcp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steve228uk%2Fmetro-mcp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steve228uk%2Fmetro-mcp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steve228uk","download_url":"https://codeload.github.com/steve228uk/metro-mcp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steve228uk%2Fmetro-mcp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36946231,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-08-22T15:14:58.755Z","status":"online","status_checked_at":"2026-08-27T02:00:07.166Z","response_time":96,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agentic-ai","cdp","chrome-devtools-protocol","debugger","debugging","expo","hermes","llm","mcp","mcp-server","react-native"],"created_at":"2026-04-02T19:02:34.158Z","updated_at":"2026-08-27T18:27:12.837Z","avatar_url":"https://github.com/steve228uk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# metro-mcp\n\n[![Install in VS Code](https://img.shields.io/badge/Install_in-VS_Code-0098FF?style=flat-square\u0026logo=visualstudiocode\u0026logoColor=white)](https://vscode.dev/redirect/mcp/install?name=metro-mcp\u0026config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22metro-mcp%22%5D%2C%22env%22%3A%7B%7D%7D)\n[![Install in Cursor](https://img.shields.io/badge/Install_in-Cursor-000000?style=flat-square\u0026logoColor=white)](https://cursor.com/en/install-mcp?name=metro-mcp\u0026config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIm1ldHJvLW1jcCJdLCJlbnYiOnt9fQ==)\n\nA plugin-based MCP server for React Native runtime debugging, inspection, and automation. Connects to Metro bundler via Chrome DevTools Protocol — **no app code changes needed** for most features.\n\nWorks with **Expo**, **bare React Native**, and any project using **Metro + Hermes**.\n\n---\n\n## Contents\n\n- [Quick Start](#quick-start)\n- [Requirements](#requirements)\n- [How It Works](#how-it-works)\n- [Features](#features)\n- [Chrome DevTools](#chrome-devtools)\n- [Claude Code Status Bar](#claude-code-status-bar)\n- [Test Recording](#test-recording)\n- [App Integration](#app-integration-optional)\n- [Configuration](#configuration)\n- [Custom Plugins](#custom-plugins)\n- [Compatibility](#compatibility)\n\n---\n\n## Quick Start\n\n### Claude Code\n\n```bash\nclaude mcp add metro-mcp -- npx -y metro-mcp\n# or with Bun\nclaude mcp add metro-mcp -- bunx metro-mcp\n```\n\n### Codex\n\n```bash\ncodex mcp add metro-mcp -- npx -y metro-mcp\n# or with Bun\ncodex mcp add metro-mcp -- bunx metro-mcp\n```\n\nCodex stores MCP servers in `~/.codex/config.toml` by default, and the Codex CLI and IDE extension share that configuration.\n\nIf you prefer to configure it manually:\n\n```toml\n[mcp_servers.metro-mcp]\ncommand = \"npx\"\nargs = [\"-y\", \"metro-mcp\"]\n```\n\n### OpenCode\n\nRun OpenCode's interactive MCP installer:\n\n```bash\nopencode mcp add\n```\n\nChoose a local server, name it `metro-mcp`, and use `npx -y metro-mcp` as the command.\n\nIf you prefer to configure it manually, add this to `opencode.json` in your project, or to `~/.config/opencode/opencode.json` for a global install:\n\n```json\n{\n  \"$schema\": \"https://opencode.ai/config.json\",\n  \"mcp\": {\n    \"metro-mcp\": {\n      \"type\": \"local\",\n      \"command\": [\"npx\", \"-y\", \"metro-mcp\"],\n      \"enabled\": true\n    }\n  }\n}\n```\n\nOr with Bun:\n\n```json\n{\n  \"$schema\": \"https://opencode.ai/config.json\",\n  \"mcp\": {\n    \"metro-mcp\": {\n      \"type\": \"local\",\n      \"command\": [\"bunx\", \"metro-mcp\"],\n      \"enabled\": true\n    }\n  }\n}\n```\n\n### Cursor / VS Code\n\n```json\n{\n  \"mcpServers\": {\n    \"metro-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"metro-mcp\"]\n    }\n  }\n}\n```\n\nOr with Bun:\n\n```json\n{\n  \"mcpServers\": {\n    \"metro-mcp\": {\n      \"command\": \"bunx\",\n      \"args\": [\"metro-mcp\"]\n    }\n  }\n}\n```\n\n### Install across multiple agents\n\nIf you use several MCP clients, [`add-mcp`](https://github.com/neondatabase/add-mcp) can write the config for supported agents, including Claude Code, Codex, Cursor, OpenCode, and VS Code:\n\n```bash\nnpx add-mcp metro-mcp --all -g -y\n```\n\nmetro-mcp supports multiple agents at the same time. Standard stdio installs start or reuse a local shared daemon for the same project directory and Metro/config options, so Codex, Claude Code, Cursor, and other clients can connect concurrently to the same running Metro app and see the same logs, network requests, errors, and runtime state.\n\n### Shared HTTP server / Supergateway\n\nIf you want to expose one long-lived MCP endpoint yourself, start the shared server explicitly:\n\n```bash\nnpx -y metro-mcp serve --mcp-port 8765\n```\n\nThis serves Streamable HTTP at `http://127.0.0.1:8765/mcp` and legacy SSE at `http://127.0.0.1:8765/sse`. Tools such as [`supergateway`](https://github.com/supercorp-ai/supergateway) can point at the Streamable HTTP endpoint instead of launching a fresh stdio process per request.\n\n### With custom Metro port\n\n```bash\ncodex mcp add metro-mcp -- npx -y metro-mcp --port 19000\n# or\nclaude mcp add metro-mcp -- npx -y metro-mcp --port 19000\n```\n\nFor OpenCode, add the port to the command array:\n\n```json\n\"command\": [\"npx\", \"-y\", \"metro-mcp\", \"--port\", \"19000\"]\n```\n\n---\n\n## Requirements\n\n- **Node.js** 18+ or **Bun** 1.0+\n- **iOS**: Xcode 14+ with Simulator (`xcrun simctl` is used for most operations)\n- **Android**: Android SDK with `adb` on your PATH\n- **IDB** *(optional)*: Some iOS operations fall back to [IDB (idb-companion)](https://github.com/facebook/idb) — install with `brew install idb-companion`. Tools will tell you when IDB is needed.\n\n---\n\n## How It Works\n\nmetro-mcp connects to your running Metro dev server the same way Chrome DevTools does:\n\n1. Discovers Metro via port scanning (8081, 8082, 19000–19002)\n2. Connects to Hermes via Chrome DevTools Protocol (CDP)\n3. Streams console logs, network requests, and errors into buffers\n4. Exposes everything as MCP tools, resources, and prompts\n\n**No app modifications required** for core debugging features.\n\n---\n\n## Features\n\n| Plugin | Tools | Description |\n|--------|-------|-------------|\n| **console** | 2 | Console log collection with filtering |\n| **network** | 6 | Network request tracking, response body inspection, and stats |\n| **errors** | 3 | Runtime exception collection + Metro bundle error detection |\n| **evaluate** | 1 | Execute JavaScript in the app runtime |\n| **device** | 4 | Device management, connection status, and app reload |\n| **environment** | 4 | Build flags, platform constants, env vars, and Expo config inspection |\n| **source** | 1 | Stack trace symbolication |\n| **redux** | 3 | Redux state inspection and action dispatch |\n| **components** | 5 | React component tree inspection |\n| **storage** | 3 | AsyncStorage reading |\n| **simulator** | 6 | iOS simulator / Android device control |\n| **deeplink** | 2 | Cross-platform deep link testing |\n| **permissions** | 5 | Inspect and manage app permissions on iOS Simulator and Android Emulator |\n| **ui-interact** | 6 | UI automation (tap, swipe, type) |\n| **navigation** | 4 | React Navigation / Expo Router state |\n| **accessibility** | 3 | Accessibility auditing |\n| **commands** | 2 | Custom app commands |\n| **automation** | 3 | Wait/polling helpers for async state changes |\n| **profiler** | 9 | CPU profiling (React DevTools hook) + heap sampling + render tracking |\n| **test-recorder** | 7 | Record interactions and generate Appium, Maestro, or Detox tests |\n| **filesystem** | 5 | Browse and read files in app sandbox directories (Documents, caches, SQLite DBs) |\n| **devtools** | 1 | Open Chrome DevTools alongside the MCP via CDP proxy |\n| **debug-globals** | 1 | Auto-discover Redux stores, Apollo Client, and other debug globals |\n| **inspect-point** | 1 | Coordinate-based React component inspection (experimental) |\n| **statusline** | 1 | Claude Code status bar integration |\n\n→ See the [full tools reference](docs/tools.md).\n\n---\n\n## Chrome DevTools\n\nHermes (the React Native JavaScript engine) only allows a **single CDP debugger connection** at a time. Since metro-mcp uses that connection, pressing **\"j\" in Metro** or tapping **\"Open Debugger\"** in the dev menu will steal the connection and disconnect the MCP.\n\nmetro-mcp solves this with a built-in **CDP proxy** that multiplexes the single Hermes connection, allowing Chrome DevTools and the MCP to work simultaneously.\n\n### Opening DevTools\n\nUse the `open_devtools` MCP tool instead of the usual methods. It opens the same React Native DevTools frontend (rn_fusebox) that Metro uses, but routes the WebSocket connection through the proxy so both can coexist.\n\nThe tool automatically finds Chrome or Edge using the same detection as Metro and opens a standalone DevTools window.\n\n### What to avoid\n\n| Method | What happens |\n|--------|-------------|\n| Pressing **\"j\"** in Metro terminal | Disconnects the MCP |\n| **\"Open Debugger\"** in the dev menu | Disconnects the MCP |\n| `open_devtools` MCP tool | Works alongside the MCP |\n\n### Configuration\n\nThe CDP proxy is enabled by default. To change the port or disable it:\n\n```bash\n# Set a fixed proxy port\nMETRO_MCP_PROXY_PORT=9222 npx metro-mcp\n\n# Disable the proxy entirely\nMETRO_MCP_PROXY_ENABLED=false npx metro-mcp\n```\n\n---\n\n## Claude Code Status Bar\n\nGet live Metro CDP connection status in your Claude Code status bar.\n\nRun `setup_statusline` in Claude Code — it writes a script to `~/.claude/metro-mcp-statusline.sh`, then ask Claude to add it to your status bar:\n\n```\n/statusline add the script at ~/.claude/metro-mcp-statusline.sh\n```\n\nThe status bar segment shows three states:\n\n| State | Display |\n|-------|---------|\n| Not running | `Metro ○` (dimmed) |\n| Running, not connected | `Metro ●` (red) |\n| Connected | `Metro ● localhost:8081` (green) |\n\n---\n\n## Test Recording\n\nRecord real user interactions (taps, text entry, scrolls) and generate production-ready tests — no app code changes required.\n\n### AI-driven test generation\n\nDescribe a flow and the AI navigates the app, then generates the test:\n\n\u003e *\"Write an Appium test for the guest checkout flow — start by tapping 'Start Shopping' on the welcome screen and end when the cart screen is visible.\"*\n\nThe AI calls `start_test_recording`, navigates using `tap_element`/`type_text`/`swipe`, then generates a complete test with real selectors observed from the fiber tree.\n\n### Manual recording\n\n```\nstart_test_recording   → inject interceptors\n(interact with the app)\nstop_test_recording    → retrieve event log\ngenerate_test_from_recording format=appium\n```\n\nSupports **Appium (WebdriverIO)**, **Maestro YAML**, and **Detox**.\n\n→ See the [testing guide](docs/testing.md) for full details, format examples, and tips.\n\n---\n\n## App Integration (Optional)\n\nRegister custom commands and expose state to the MCP server — no package needed. Add this to your app entry point in dev mode:\n\n```typescript\nif (__DEV__) {\n  globalThis.__METRO_BRIDGE__ = {\n    commands: {\n      // Run custom actions from the MCP client\n      login: async ({ email, password }) =\u003e {\n        return await authService.login(email, password);\n      },\n      resetOnboarding: () =\u003e {\n        AsyncStorage.removeItem('onboarding_completed');\n      },\n      switchUser: ({ userId }) =\u003e {\n        store.dispatch(switchUser(userId));\n      },\n    },\n    state: {\n      // Expose state snapshots readable via get_redux_state\n      userStore: () =\u003e useUserStore.getState(),\n    },\n  };\n}\n```\n\nUse `list_commands` and `run_command` to call these from the MCP client.\n\nFor enhanced features like real-time Redux action tracking, navigation events, performance marks, and React render profiling, install [`metro-bridge`](https://www.npmjs.com/package/metro-bridge) — see the [client SDK docs](docs/sdk.md) and [profiling guide](docs/profiling.md).\n\n---\n\n## Configuration\n\nSee [configuration docs](docs/configuration.md) for environment variables, CLI arguments, and config file options.\n\n---\n\n## Custom Plugins\n\nmetro-mcp is fully extensible. See the [plugins guide](docs/plugins.md) to build your own tools and resources.\n\n---\n\n## Compatibility\n\n- **React Native**: 0.70+ (Hermes required)\n- **Expo**: SDK 49+\n- **Runtime**: Node.js 18+ or Bun 1.0+\n- **Platforms**: iOS Simulator, Android Emulator, physical devices via USB\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteve228uk%2Fmetro-mcp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteve228uk%2Fmetro-mcp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteve228uk%2Fmetro-mcp/lists"}