Why I Built This

I got properly fed up with Playwright MCP. Every time an agent needs to check the UI, it launches a separate browser. That's a 2-5 second cold start, and the browser it opens has zero connection to the dev server already running in your tab. You're sat there with your webapp open, hot-reloading, state loaded, logged in, the works. And the agent spins up a blank browser like a tourist who's never been here before.

So I built debug-bridge. It connects your AI agent directly to the webapp that's already running in your browser. No separate browser, no cold start, no state recreation.

How It Works

The architecture is simple. Three pieces:

Your webapp (already running in your browser) connects to a CLI server on localhost:4000, which connects to your AI agent.

The webapp side is a lightweight script you drop in during development. It opens a WebSocket to the CLI server and starts streaming everything: the UI tree, DOM snapshots, console logs, network requests. All in real-time.

Your agent talks to the CLI server and gets full visibility into what's happening in the browser. It can see the DOM structure, read console output, inspect network traffic, and push actions back. The agent isn't guessing what the UI looks like from a screenshot. It's reading the actual live state.

The inner loop is fast because there's nothing to boot up. The browser is already there. The connection is already open. Your agent asks "what's on screen?" and gets an answer in milliseconds, not seconds.

Getting Started

debug-bridge is part of the agents-in-a-box toolkit. The debug-bridge skill is available in Claude Code, so you can drop it into your workflow without any fiddling.

If you're doing local frontend development with an AI agent, this is the fastest feedback loop you're going to find. No contest.