-
Notifications
You must be signed in to change notification settings - Fork 143
Description
Introduction
I want to discuss adding MCP (Model Context Protocol) server support to React Native debug builds. The goal is to allow AI agents and developer tools to access live UI information from the running app — such as screenshots, component hierarchy, and layout metadata — similar to how Playwright provides an inspector for web apps. This would significantly enhance the developer experience in the emerging AI-assisted tooling ecosystem.
Details
In debug mode, React Native could optionally start a lightweight embedded MCP server. This server would expose structured tools that allow external AI agents to understand the current UI state of the app.
Potential MCP tools:
_getScreenshot_ – provides a bitmap of the current screen.
_getComponentTree_ – returns the component/shadow tree to understand layout and structure.
_getViewBounds_ – exposes the positions/sizes of visible elements.
(future) test interaction hooks, e.g. simulate tap or scroll.
This feature would not affect production builds. It would function only in local debug or Metro-connected dev sessions.
Why MCP?
It’s a lightweight, standardized protocol designed for safe, structured communication between developer tools and runtime environments. It avoids custom, one-off RPC implementations and enables interoperability with the rapidly growing ecosystem of AI agents.
This would provide AI-driven insights such as UI debugging, auto-generated tests, layout validation, and better onboarding assistance — all based on what the app actually looks like at runtime.
Discussion points
Should React Native provide a built-in MCP server, or should it be an optional package?
What level of UI data should be exposed by default (screenshots, tree, bounds)?
How do we ensure safe debugging-only access without impacting production apps?
Would this help pave the way for AI-assisted test generation, accessibility checks, and RN-specific devtools?
How can this align with existing debug infrastructure like Metro, Inspector, and Flipper?