mcpField
E
expo-headless-mcp

expo-headless-mcp

Local
github.com/Abubakr-SanginovDeveloper Tools0Updated 1w ago

About expo-headless-mcp

expo-headless-mcp is an MCP server for inspecting and operating Expo and React Native apps without an emulator, phone, or browser. It renders screens to PNG and supports interaction and automated checks; optional device control is also available.

Key features

  1. 01Render app screens as PNG
  2. 02Tap, type, and scroll
  3. 03Inspect element layout and warnings
  4. 04Automatically test inputs and controls
  5. 05Optional Android and iOS device control
  6. 06Built-in verification instructions

Use cases

  1. 01Review a screen after a code change
  2. 02Check for clipped text and overlapping elements
  3. 03Find crashes and unresponsive controls
  4. 04Test an app on a connected Android device

MCP support

The MCP server exposes tools for rendering and inspecting screens, interacting with the app, and running automated tests. Optional device-mode tools operate Expo Go on Android devices or emulators and booted iOS Simulators, subject to consent.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
"mcpServers": {
"abubakr-sanginov-expo-headless": {
"command": "npx",
"args": [
"-y",
"expo-headless-mcp"
],
"env": {
"EXPO_PROJECT": "<EXPO_PROJECT>"
}
}
}
}
Run commandnpx -y expo-headless-mcp
Environment variables to set
EXPO_PROJECTAbsolute path of the Expo project to render (can also be passed per call as projectPath).

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmexpo-headless-mcp0.2.0

Tools

9

Saved tool list · updated 1w ago

ParameterTypeRequiredDescription
entrystringNoEntry file relative to the project, e.g. App.tsx
scalenumberNoPNG pixel scale (default 1.5)
widthnumberNoScreen width in dp (default 390)
heightnumberNoScreen height in dp (default 844)
reloadbooleanNoRe-bundle and restart the app (default true)
projectPathstringNoExpo project directory (default: EXPO_PROJECT env or server cwd)

Details

From the project README

expo-headless-mcp

An MCP server that lets an AI see and operate an Expo / React Native app without an emulator, a phone or a browser — real PNG screenshots, taps, typing, scrolling and automatic bug hunting. (Русская версия: README.ru.md)

Documentation

How it works

Metro + Expo Go need a native runtime, so instead:

  1. esbuild bundles your project (App.* or main), swapping react-native for a light shim (src/shim/rn.js) and native-only packages (expo-*, react-native-*) for stubs.
  2. The app runs in Node; React renders into our own tree (react-reconciler).
  3. Layout is computed by Yoga (the flexbox engine React Native uses) and painted by Skia (@napi-rs/canvas) into a PNG.

Limits: an approximation, not real iOS/Android — fonts, shadows, animations and native modules differ; expo-router / react-navigation are not supported; state resets on refresh_screen.

Tools

  • refresh_screen — rebuild and show the screen (projectPath, entry, width, height, scale, reload)
  • click_screen — tap at x,y or by target (testID / text), long, or alert:<button>
  • type_text — type into a TextInput (target or x,y, submit, append)
  • scroll_screen — scroll the area under x,y
  • describe_screen — text outline of elements + layout warnings (overlap, clipped text, off-screen)
  • auto_test — monkey-test everything: several rounds of reload, fill every input with varied data (empty, invalid, valid, very long, special characters, Cyrillic, CJK, Arabic/Hebrew, emoji), tap every button/switch (scrolling to reach it), dismiss alerts. Reports crashes, console errors, layout problems and dead buttons with screenshots.

The server ships built-in instructions: after any code change the AI must rebuild, check by hand, run auto_test, fix and repeat until a full pass is clean. The MCP prompt verify_changes triggers the same loop.

Languages

The server's text is English, and the AI answers in whatever language the user writes in. Rendering falls back to system fonts for Latin, Cyrillic, CJK, Devanagari, Arabic, Hebrew and emoji (install Noto fonts on Linux). Right-to-left layout (I18nManager) is not simulated; RTL text itself renders.

Install

claude mcp add expo -e EXPO_PROJECT=/path/to/app -- npx -y expo-headless-mcp

Tests: npm test (end-to-end), node test/mcp.js (stdio).

Real device mode (optional)

Besides the headless renderer, the AI can drive Expo Go on an Android emulator or a USB phone through adb (Windows, macOS, Linux) and in a booted iOS Simulator (macOS with Xcode only). Physical iPhones are not supported: Apple does not allow remote input without heavy tooling — open Expo Go on the iPhone yourself.

Tools: device_list (read-only), use_target (device / headless), press_key; refresh_screen, click_screen, type_text, scroll_screen, describe_screen then act on the device.

Safety rules built into the server:

  • Nothing is connected / adb missing → it says so, changes nothing, and recommends that you check the app yourself (or use headless mode).
  • USB debugging off or unauthorized → it explains how to enable it and warns up front that it will tap, type and scroll on your phone.
  • Consent first. It asks you (MCP elicitation, or via the AI in chat if your client lacks it) before controlling a physical phone, before installing Expo Go when it is missing, and before replacing an Expo Go whose SDK does not match the project (the matching build comes from Expo's official release list; a downgrade needs an uninstall first, which is stated in the question). If you decline, nothing is done and it will not retry.
  • It only touches Expo Go: every tap/type/swipe first checks that Expo Go is in the foreground. Allowed keys: back, enter, tab, delete.
  • auto_test is headless-only (it taps everything). Non-ASCII text cannot be typed through adb — test other languages in headless mode.

Status: the Android path has been used on a real phone by the author, and is covered by automated tests against a fake adb.

Starting the dev server runs npx expo start in your project (it asks before running npm install if dependencies are missing). Override with EXPO_MCP_METRO_CMD; set EXPO_MCP_ADB to use a specific adb.

iOS Simulator notes
  • Needs macOS + Xcode (xcrun simctl) and Facebook idb for taps/typing/UI tree (brew tap facebook/fb && brew install idb-companion && pip3 install fb-idb). Without idb the server only tells you how to install it; it never installs it.
  • Expo Go for the project's SDK is installed/replaced only after you consent (official build from Expo's release list).
  • The simulator is disposable, so there is no per-app focus check; there is no hardware Back key on iOS.
  • Status: the iOS path is covered by tests against fake xcrun/idb only — it has not been run on a real Mac yet.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.