expo-mcp-bridge

expo-mcp-bridge gives AI agents — Claude Code, Antigravity, Cursor and any other MCP client — eyes and hands inside your Expo / React Native app, running live on your real phone. The agent reads the screen, taps, types, scrolls, takes screenshots, reads console errors and network requests, and presses hardware keys. No more pasting screenshots into the chat.

import { Stack, router } from 'expo-router';
import { AgentBridge } from 'expo-mcp-bridge';

export default function RootLayout() {
  return (
    <>
      <Stack />
      <AgentBridge router={router} />
    </>
  );
}

"Open the app, try the sign-up form with bad input, and tell me what breaks."

Table of contents

• Installation

• Quick start

• Features

• What the agent sees

• Common questions

• Connecting your agent

• Tools

• Component API

• CLI and environment

• How it works

• Troubleshooting

• Limits

• Related

• Contributing

• License

Related MCP server: React Native Debug MCP

Installation

npx expo install expo-mcp-bridge react-native-view-shot
npx expo-mcp-bridge init

react-native-view-shot powers screenshots and ships with Expo Go; in a custom dev build, rebuild the client once after installing it. init writes your agent's MCP config, installs the agent skill and adds a guide to AGENTS.md.

Requirements: Node.js 20 or newer on your computer · an Expo (or React Native) app · phone and computer on the same Wi-Fi.

Quick start

The one-shot way. Paste this into Claude Code, Antigravity or Cursor inside your Expo project and the agent installs, mounts and verifies everything itself:

Read https://raw.githubusercontent.com/Rudrasamadhiya/expo-mcp-bridge/main/AI_SETUP.md and set it up in this project.

By hand, in two minutes:

1. Install the packages and run init (above).

2. Mount <AgentBridge /> once, as the last child of your root layout (example at the top of this page).

3. Run npx expo start in LAN mode and open the app on your phone.

4. Restart your agent and ask it to do something in the app.

Features

• Real devices, zero native setup. Expo Go or a dev build, iPhone or Android, over Wi-Fi. One component, no native linking.

• Token-cheap by design. The agent reads a compact outline of the visible screen — about 70 tokens instead of about 1,000 for a screenshot — and every action returns only what changed.

• Fast flows. Actions finish the moment the UI settles. app_batch fills a whole form in one call.

• Sees what broke. New JS errors and failed requests are attached to the action that caused them.

• Full control. Tap, type, scroll, toggle, navigate, wait, screenshots, layout, logs, network, eval — and volume / back / home keys.

• Agent skill included. init installs a skill for Claude Code and an AGENTS.md guide for Antigravity, Cursor, Codex and others, so agents use the tools well from the first message.

• Dev only. In production builds <AgentBridge /> renders its children and nothing else.

What the agent sees

A real login screen, as returned by app_snapshot:

scroll [e1]
  button "icon:chevron-back" [e2]
  text "Welcome back"
  input "you@example.com" value="" [e3]
  input "••••••••" value="" (secure) [e4]
  button "icon:eye" [e5]
  button "Log In" [e7]

Tapping e5 (show password) returns just the difference:

Tapped.
Changes (+ added, - removed):
~ input "••••••••" value="" [e4]
+ button "icon:eye-off" [e9]
- button "icon:eye" [e5]

Common questions

How do I let Claude Code, Cursor or Antigravity see my Expo app?

Install this package, run npx expo-mcp-bridge init, and mount <AgentBridge /> in your root layout. Your agent then gets MCP tools such as app_snapshot (read the visible screen), app_tap, app_type and app_screenshot, and works directly against the app running on your phone.

My AI agent keeps asking me for screenshots of my React Native app. How do I stop that?

That is exactly what this package replaces. Instead of you taking screenshots and pasting them into the chat, the agent calls app_snapshot itself and receives a compact outline of the screen (about 70 tokens instead of about 1,000 for an image), or app_screenshot when it really needs pixels.

Can an AI agent test my React Native app on a real phone?

Yes. The agent taps, types, scrolls and navigates through your real handlers, reads new JS errors and failed network requests after every action, and reports what broke. It works in Expo Go or a dev build, on iPhone and Android, over Wi-Fi.

Does it work with Expo Go?

Yes. Both the bridge and its screenshot dependency (react-native-view-shot) run in Expo Go. No native code, no config plugin and no rebuild are needed.

How is this different from Detox, Maestro or Appium?

Those are end-to-end test frameworks: you write test scripts or flows and run them in CI. expo-mcp-bridge is for development with an AI agent: the agent explores and drives the live app interactively and fixes the code in the same session. It needs no native setup and reads the React tree directly, so it complements a test framework rather than replacing one.

Is it safe to leave in my app?

<AgentBridge /> only runs in development (__DEV__) and only connects to your own computer. In production builds it renders its children and nothing else.

Connecting your agent

init writes .mcp.json for Claude Code. Other agents use the same server:

On Windows use "command": "cmd", "args": ["/c", "npx", "expo-mcp-bridge"].

Tools

Target elements by ref from a snapshot, by testID, or by visible text. Full parameters are in the tools reference.

Read

Act

Debug

Device

Component API

<AgentBridge
  router={router}      // expo-router's router, for exact app_navigate
  host="192.168.1.20"  // your computer's IP (auto-detected from Metro)
  port={8347}          // must match EXPO_MCP_PORT
  allowEval={false}    // disable app_eval
  enabled={false}      // turn the bridge off
/>

CLI and environment

npx expo-mcp-bridge init            # .mcp.json + agent skill + AGENTS.md section
npx expo-mcp-bridge init --cursor   # also write .cursor/mcp.json
npx expo-mcp-bridge                 # run the MCP server (your agent starts this for you)
npx expo-mcp-bridge --help

You normally never run the server yourself — the agent launches it over stdio. To try it by hand, any MCP client works: npx @modelcontextprotocol/inspector npx expo-mcp-bridge.

How it works

AI agent  ──MCP (stdio)──▶  expo-mcp-bridge server  ◀──WebSocket :8347──  <AgentBridge /> in your app

The in-app component reads React's live component tree, so it sees exactly what you rendered: your testIDs, labels, inputs and lists. It calls your real onPress and onChangeText handlers, so app logic runs exactly as if a user did it. Native-stack screens hidden under the current one are skipped, modals are captured as overlays, and screenshots capture the visible screen view.

Troubleshooting

More in the troubleshooting guide.

Limits

An in-app library controls your own app only; the OS blocks system dialogs and other apps. device_key covers hardware keys via adb on Android. Gestures that exist only in native code (a pan handler with no onPress) can't be triggered from JavaScript.

Related

• expo-launch-video — builds on this bridge: your agent records the app live from the phone and cuts a launch video with motion graphics, pop-outs and sound, in a studio you can prompt.

• Expo Agent Kit — the website and full documentation for both libraries.

Contributing

npm install
npm test

The tests run the bridge in Node against the real MCP server. See CONTRIBUTING.md for details.

License

MIT © Rudra Samadhiya