The Practical Guide to iOS Simulator Browser Integration

If you’ve spent any time wrestling with XCUITest or trying to debug React Native components in a live simulator, you know the pain. You’re constantly context-switching between your IDE, the Simulator app, and the browser. Most developers accept this as the cost of doing business, but it’s actually a massive productivity sink.

The agent-simulator changes the game by bringing your iOS simulator directly into the browser. It’s not just a screen mirror; it’s a fully inspectable, scriptable environment that exposes your app’s internals through an MCP bridge.

Here’s the part most guides miss: you don’t need to move your macOS cursor to interact with the simulator anymore. By using axe as a cursor-free input driver, this tool sends taps, swipes, and keyboard events directly to the simulator’s core. This means your mouse stays where it belongs—in your browser—while you drive the simulator with pixel-perfect precision.

Why this beats traditional inspection

For React Native and Expo developers, the real magic lies in the inspector bridge. When you integrate the agent-simulator plugin, you get a "layers panel" that feels like Figma for your app. You can click any element on the screen and immediately see the React component tree, the fiber stack, and the actual source code file.

Most tools give you a vague idea of where a component lives. This tool gives you the exact line number in your App.tsx. It’s a massive time-saver when you’re hunting down styling issues or tracking down why a specific prop isn’t passing through.

Automating with AI agents

The most compelling feature isn't just the visual inspection; it’s the MCP (Model Context Protocol) bridge. Because the simulator exposes its accessibility tree and input capabilities over MCP, you can hook it up to Claude Desktop or other AI agents.

Imagine telling an AI, "Find the login button, type my credentials, and tell me if the dashboard loads." The agent can see the accessibility labels, perform the taps, and verify the state without you writing a single line of brittle XCUITest code. It’s a complete shift in how we approach mobile automation.

Getting started without the headache

You don’t need to overhaul your entire project to see the benefits. You can start by simply booting a simulator and running the server to get the live stream and accessibility tree. If you want the deep React component inspection, you just add the metro plugin to your metro.config.js.

Here is the quick path to getting it running:

1. Install the axe driver via Homebrew.
2. Clone the repository and build the Rust sim-server.
3. Run bun demo to launch the pre-configured Expo example.

Once you see the BRIDGE pill turn green in the toolbar, you’ll realize how much time you’ve been wasting on manual simulator management. This is the kind of developer tooling that actually moves the needle on daily velocity.

If you’re tired of the standard simulator workflow, try this today and share what you find in the comments. It’s a rare tool that actually makes the development loop feel faster rather than just adding more configuration overhead.