<AgentBridge /> API

The in-app component. Mount it once near the root. In development it dials the MCP server on your computer; in production it renders its children and nothing else.

import { AgentBridge } from 'expo-mcp-bridge';

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

Props

Prop	Type	Default	Description
`router`	`{ push(path) }`	—	expo-router's router, for exact app_navigate
`host`	`string`	auto (Metro host)	Computer running the MCP server
`port`	`number`	8347	Must match EXPO_MCP_PORT
`allowEval`	`boolean`	true (dev)	Allow app_eval
`enabled`	`boolean`	true (dev)	Turn the bridge off
`children`	`ReactNode`	—	Rendered as-is (always, including production)

How it works

The component reads React's live fiber tree, so it sees exactly what you rendered: testIDs, accessibility labels, inputs, lists and switches. It calls your real onPress / onChangeText handlers, so app logic runs exactly as if a user did it.

Screens kept mounted under a native stack are skipped — snapshots show only what's visible.
React Native <Modal>s render in their own window; the recorder captures them as transparent overlays.
Screenshots capture the visible screen's own view (whole-window capture can return stale frames on Android).
Console output, JS errors and fetch/XHR traffic are kept in small ring buffers, with auth headers redacted.

TypeScript

Types ship with the package (client/index.d.ts).