{"id":52150205,"url":"https://github.com/hcbylmz/rn-devtools-mcp","last_synced_at":"2026-08-06T20:01:20.123Z","repository":{"id":369028140,"uuid":"1206741306","full_name":"hcbylmz/rn-devtools-mcp","owner":"hcbylmz","description":"🤖 MCP server that lets AI assistants (Claude, Cursor) inspect live React Native apps — components, console, network, Redux state via CDP.","archived":false,"fork":false,"pushed_at":"2026-07-03T08:02:17.000Z","size":38,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-03T09:28:43.820Z","etag":null,"topics":["ai-tools","chrome-devtools-protocol","mcp","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/hcbylmz.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}},"created_at":"2026-04-10T07:58:18.000Z","updated_at":"2026-07-03T08:02:20.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/hcbylmz/rn-devtools-mcp","commit_stats":null,"previous_names":["hcbylmz/rn-devtools-mcp"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/hcbylmz/rn-devtools-mcp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcbylmz%2Frn-devtools-mcp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcbylmz%2Frn-devtools-mcp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcbylmz%2Frn-devtools-mcp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcbylmz%2Frn-devtools-mcp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hcbylmz","download_url":"https://codeload.github.com/hcbylmz/rn-devtools-mcp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcbylmz%2Frn-devtools-mcp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36347215,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-08-06T04:43:03.162Z","status":"ssl_error","status_checked_at":"2026-08-06T04:43:02.660Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["ai-tools","chrome-devtools-protocol","mcp","react-native"],"created_at":"2026-08-06T20:01:17.820Z","updated_at":"2026-08-06T20:01:20.117Z","avatar_url":"https://github.com/hcbylmz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rn-devtools-mcp\n\n[![CI](https://github.com/hcbylmz/rn-devtools-mcp/actions/workflows/ci.yml/badge.svg)](https://github.com/hcbylmz/rn-devtools-mcp/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/%40hcbylmz%2Frn-devtools-mcp.svg)](https://www.npmjs.com/package/@hcbylmz/rn-devtools-mcp)\n[![license](https://img.shields.io/npm/l/%40hcbylmz%2Frn-devtools-mcp.svg)](./LICENSE)\n\nAn [MCP](https://modelcontextprotocol.io) server that lets AI assistants (Claude Code, Cursor, Windsurf, etc.) inspect a running React Native app through the Chrome DevTools Protocol exposed by Metro / Hermes.\n\nWith it, your AI can:\n\n- Read the **React component tree** (names, props, hook state)\n- Tail **console logs** captured from the device\n- Tail **uncaught exceptions / red-box errors** with source-mapped stack frames\n- List **network requests** and fetch response bodies\n- Inspect **Redux state** (with slice/path selectors)\n- Watch the **Redux action log** (type + which slices changed) and **dispatch** actions\n- Discover available **state containers** (Redux, Zustand, Jotai, React Query, Recoil)\n- Evaluate arbitrary JavaScript in the app runtime\n- Inspect any app state via custom expressions (AsyncStorage, globals, …)\n\nConnections **auto-reconnect** — tools transparently re-establish the CDP session\nafter an app reload, so you rarely need to call `connect` more than once.\n\nIt's the missing bridge between \"the app is running on my simulator\" and \"my AI can actually see what's happening inside it.\"\n\n## Why\n\nWhen debugging a React Native app with an AI assistant, the assistant usually flies blind — it can read your code but not your runtime. This MCP server connects directly to the CDP endpoint that Metro already exposes on port 8081, so the AI can query live app state instead of asking you to paste logs.\n\n## For AI agents (Claude Code, Codex, Cursor, …)\n\nIf a user points you at this repository and asks you to \"set it up\" or \"install it\", follow these steps exactly:\n\n1. **Clone into a stable location** (not a temp dir — the MCP client needs an absolute path that persists):\n   ```bash\n   git clone https://github.com/hcbylmz/rn-devtools-mcp.git ~/.mcp-servers/rn-devtools-mcp\n   cd ~/.mcp-servers/rn-devtools-mcp\n   npm install\n   ```\n\n2. **Register the server with the user's MCP client.** Detect which client is in use and patch its config:\n\n   - **Claude Code:** add to `~/.claude.json` (user scope) under `mcpServers`, or run:\n     ```bash\n     claude mcp add rn-devtools node $(pwd)/src/index.js\n     ```\n   - **Codex CLI:** add to `~/.codex/config.toml`:\n     ```toml\n     [mcp_servers.rn-devtools]\n     command = \"node\"\n     args = [\"/absolute/path/to/rn-devtools-mcp/src/index.js\"]\n     ```\n   - **Cursor / Windsurf / generic:** add to the client's MCP config:\n     ```json\n     {\n       \"mcpServers\": {\n         \"rn-devtools\": {\n           \"command\": \"node\",\n           \"args\": [\"/absolute/path/to/rn-devtools-mcp/src/index.js\"],\n           \"env\": { \"METRO_PORT\": \"8081\" }\n         }\n       }\n     }\n     ```\n\n   Always use an **absolute path** — MCP clients don't resolve `~` or relative paths.\n\n3. **Tell the user to restart their MCP client** so the new server is picked up, then verify it loaded (in Claude Code: `/mcp`; in Codex: the server should appear in startup logs).\n\n4. **On first use, call the `connect` tool** before any other tool. If the user reloads the RN app, call `connect` again.\n\n5. **Quick self-check prompt for the user to run** after setup:\n   \u003e \"Use rn-devtools to connect and then show me the last 20 console logs.\"\n\nIf Metro isn't running or the app isn't in dev mode, `connect` will fail with a clear error — surface it verbatim rather than guessing.\n\n## Requirements\n\n- Node.js 18+\n- A React Native app running in **development mode** with Hermes (default in modern RN)\n- Metro bundler running (the app must be actively connected)\n\n## Install\n\nThe quickest way — no clone needed:\n\n```bash\n# Claude Code\nclaude mcp add rn-devtools -- npx -y @hcbylmz/rn-devtools-mcp\n```\n\nOr for any MCP client:\n\n```json\n{\n  \"mcpServers\": {\n    \"rn-devtools\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@hcbylmz/rn-devtools-mcp\"],\n      \"env\": { \"METRO_PORT\": \"8081\" }\n    }\n  }\n}\n```\n\nFrom source, if you prefer:\n\n```bash\ngit clone https://github.com/hcbylmz/rn-devtools-mcp.git\ncd rn-devtools-mcp\nnpm install\n```\n\n## Configure your MCP client\n\n### Claude Code\n\nAdd to `~/.claude/mcp.json` (or your project's `.mcp.json`):\n\n```json\n{\n  \"mcpServers\": {\n    \"rn-devtools\": {\n      \"command\": \"node\",\n      \"args\": [\"/absolute/path/to/rn-devtools-mcp/src/index.js\"],\n      \"env\": {\n        \"METRO_PORT\": \"8081\"\n      }\n    }\n  }\n}\n```\n\n### Cursor / Windsurf / other MCP clients\n\nSame idea — point the client at `src/index.js` with Node. `METRO_PORT` is optional (defaults to 8081).\n\n## Usage\n\n1. Start your React Native app (`npm run ios` / `npm run android` / `npx expo start`).\n2. In your AI client, call the `connect` tool first. This attaches to the Hermes debugger and enables the Runtime + Network CDP domains.\n3. From then on, the AI can call any of the tools below.\n\nIf you reload the app, call `connect` again to re-attach.\n\n## Tools\n\n| Tool | Purpose |\n|---|---|\n| `connect` | Attach to the Hermes debugger. **Call this first.** |\n| `disconnect` | Detach. |\n| `get_targets` | List all debugger targets Metro exposes. |\n| `evaluate_js` | Run a JS expression in the app runtime and return the result. |\n| `get_component_tree` | Walk the React fiber tree and return components, props, and hook state. |\n| `get_console_logs` | Recent `console.*` calls, filterable by level. |\n| `get_network_requests` | Recent network requests, filterable by URL substring. |\n| `get_network_request_detail` | Full headers/metadata for a specific request. |\n| `get_response_body` | Decoded response body (JSON auto-formatted). |\n| `get_redux_state` | Full state, a slice, or a dot-path inside a slice. |\n| `get_app_state` | Evaluate any custom inspection expression. |\n\n### Redux integration\n\nFor `get_redux_state` to work, expose your store once at app startup:\n\n```ts\n// src/store.ts (or wherever you create the store)\nexport const store = configureStore({ /* … */ });\n\nif (__DEV__) {\n  // @ts-ignore\n  globalThis.__REDUX_STORE__ = store;\n}\n```\n\nThen your AI can ask things like \"what's in `auth.user`?\" and actually get the answer.\n\n### Component tree hook\n\n`get_component_tree` reads `globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__`, which React Native sets up automatically in dev mode — no extra setup required.\n\n## How it works\n\nMetro exposes a CDP endpoint at `http://localhost:8081/json`. This server discovers the Hermes target, opens a WebSocket to its `webSocketDebuggerUrl`, and speaks plain Chrome DevTools Protocol. Console messages and network events are buffered as they stream in; tools either query the buffer or issue `Runtime.evaluate` calls against the live runtime.\n\nNo native code, no patches to your app — just the debug protocol that's already there.\n\n## Caveats\n\n- The app must be in **development mode**. Production builds don't expose the CDP endpoint.\n- Hermes only. JSC targets may work partially (Runtime domain), but it's not tested.\n- Console and network buffers are capped (~500 entries) and trimmed when they grow.\n- Tools don't try to sanitize what the AI evaluates — treat it as a dev tool, not a sandbox.\n\n## License\n\nMIT — see [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcbylmz%2Frn-devtools-mcp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhcbylmz%2Frn-devtools-mcp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcbylmz%2Frn-devtools-mcp/lists"}