There's a new category of AI coding tools emerging: ones that connect to your running application instead of just reading source files. The pitch is the same across all of them — give the AI runtime context so it stops guessing about what your app actually looks like and does.
The implementations are very different. Some hook into the dev server. Some proxy the browser. Some expose DevTools via MCP. Some are free, some charge monthly, some are experimental. I've been working in this space and wanted to write an honest comparison, since most "tool roundup" articles are either thinly disguised ads or surface-level feature lists.
Disclosure upfront: I'm involved with Frontman, one of the tools listed. I'll be transparent about where it's stronger and where it's weaker than alternatives.
Why This Category Exists
AI coding tools (Cursor, Copilot, Claude Code, Windsurf) work from source files. They don't see:
- The rendered DOM, computed styles, or layout geometry (client side)
- The compiled module graph, registered routes, server logs, or middleware state (server side)
For any web application with a runtime, this means the AI is guessing about a significant chunk of the application's behavior. The result is the describe-check-fix loop: the AI makes an edit, you check the browser, it's wrong, you describe it again.
Runtime-aware tools try to close this gap. Here's how each one does it.
The Tools
1. Frontman
Website: frontman.sh
Source: github.com/frontman-ai/frontman (Apache 2.0 / AGPL-3.0)
Stars: ~131
Approach: Framework middleware
Frontman installs as middleware inside your framework's dev server (Next.js, Astro, or Vite). Because it runs inside the framework, it has native access to both client-side context (DOM, component tree, computed styles, click targets) and server-side context (routes, compiled module graph, server logs, framework-specific state). Both are exposed to the AI agent via MCP.
The workflow: open your app in the browser, click any element, describe what you want changed. Frontman maps the element back to the source file and line, gives the AI runtime context, generates the edit, and hot reloads.
Strengths:
- Deepest framework integration — sees both client and server runtime
- Fully free. No prompt limits, no account required
- BYOK — connect Claude, OpenAI, or OpenRouter directly
- Open source with permissive client library licensing (Apache 2.0)
- Supports 5 frameworks: Next.js, Astro, Vite+React, Vite+Vue, Vite+Svelte
Weaknesses:
- Early stage (~150 stars). Rough edges and incomplete documentation
- Limited to supported frameworks (no Angular, no Remix yet)
- Source mapping breaks on deeply abstracted component libraries
- Small community — fewer examples, tutorials
Best for: Developers who want the deepest runtime integration, use a supported framework, prefer open source, and don't want to pay for another subscription.
Disclosure: I'm involved with this project.
2. Stagewise
Website: stagewise.io
Source: github.com/stagewise-io/stagewise (AGPL-3.0)
Stars: ~6,500
Backing: YC S25
Approach: Browser proxy / CLI injection
Stagewise started as a browser toolbar and is pivoting to a full "developer browser" (Electron-based). It runs npx stagewise@latest which starts a CLI proxy on port 3100 and injects a toolbar into your running app.
Two modes:
- Standalone: has its own built-in AI agent. Requires OAuth login.
- Bridge mode: connects to your IDE agent (Cursor, Copilot, Windsurf). You describe changes in the browser, but execution happens in the IDE.
Strengths:
- Most polished option in the category. YC backing shows.
- ~6,500 stars — active community, more examples and tutorials
- Supports React, Next.js, Vue, Angular, plus CSS frameworks (Tailwind, Bootstrap, MUI, ShadCN)
- Bridge mode integrates with existing IDE workflow
Weaknesses:
- Prompt limits: ~10 free prompts/day, EUR 20/month (+19% VAT in EU) for ~100/day
- Requires account and OAuth login before first use
- Proxy architecture means limited server-side visibility (it sits between browser and server, not inside the server)
- No Svelte or Astro support
- Bridge mode requires context-switching between browser and IDE
- Pivoting to Electron-based "developer browser" — adds significant overhead and scope creep
- No BYOK option — inference goes through their servers
- AGPL-3.0 only (no permissive client library option)
Best for: Developers who want the most polished UX, don't mind a subscription, and primarily work with React/Next.js/Vue/Angular.
3. Tidewave
Website: tidewave.ai
Source: github.com/tidewave-ai
Stars: ~1,600 combined
Created by: Jose Valim (creator of Elixir)
Approach: MCP server + custom browser app
Tidewave isn't a coding agent itself — it's an MCP enhancement layer that gives your existing agent (Claude Code, Codex, Cursor) access to runtime state. It's built by Jose Valim via Dashbit, so the deepest integration is with the Elixir/Phoenix ecosystem.
What makes Tidewave unique is its backend depth: database queries, runtime evaluation, stack traces, and live process state. For a Phoenix developer, this is like having the BEAM runtime piped directly into your AI agent. Rails and Django support exists but is thinner.
Strengths:
- Deep backend integration — DB queries, runtime eval, stack traces
- Built by Jose Valim — technical credibility is unquestionable
- Works with your existing agent (Claude Code, Codex) rather than replacing it
- Strong Phoenix/Elixir support is unmatched by anything else
Weaknesses:
- JS framework support is thin (~28 stars on
tidewave_js) - The agent isn't open source
- $10/month for the browser app
Best for: Phoenix/Rails/Django developers who want to enhance their existing AI agent with deep backend runtime context.
4. Chrome DevTools MCP (Google)
Source: [Experimental / Google]
Approach: MCP server exposing DevTools state
Google's experimental project that exposes Chrome DevTools state as MCP tools. Your AI agent can query the DOM, read console output, inspect network requests, and access other DevTools data programmatically.
Strengths:
- Official Google project — signals the category is real and becoming infrastructure
- Works with any web app (framework-agnostic)
- Free and open
- Integrates with any MCP-capable agent
Weaknesses:
- Raw — no agent included, you wire it up yourself
- Browser-only — no server-side context (routes, module graph, server logs)
- Experimental — limited documentation, may change or be abandoned
- Requires manual setup and configuration
Best for: Developers who want to add browser context to an existing agent and are comfortable with DIY integration.
5. Onlook (Honorable Mention — Different Category)
Website: onlook.dev
Source: github.com/onlook-dev/onlook
Stars: ~24,700
Backing: YC-backed
Approach: Figma-like visual editor for React/Next.js
Onlook is "Cursor for Designers" — a visual editor that lets you manipulate React/Next.js components like Figma layers, generating real code. It's a different product category (visual design tool, not runtime-aware coding agent), but it overlaps in the "non-engineers editing code" use case.
Key difference: Onlook uses a sandboxed web container, not your real dev server. This makes it safer for experimentation but means it doesn't see your actual runtime environment — middleware, environment variables, real API responses, etc.
Best for: Designers who want a Figma-like interface for React/Next.js, or teams prototyping UI without setting up a full dev environment.
Comparison Table
| Feature | Frontman | Stagewise | Tidewave | Chrome MCP | Onlook |
|---|---|---|---|---|---|
| Architecture | Framework middleware | Browser proxy | MCP server | MCP server | Visual editor |
| Client runtime | Yes | Yes | Yes | Yes | Sandboxed |
| Server runtime | Yes | Limited | Yes (deep) | No | No |
| Standalone agent | Yes | Yes | No (enhances existing) | No | Yes |
| Open source | Yes (Apache 2.0 + AGPL) | Yes (AGPL) | Mixed | Yes | Yes |
| Free (no limits) | Yes | No (10/day free) | No ($10/mo) | Yes | Yes |
| BYOK | Yes | No | Yes | Yes | Partial |
| Next.js | Yes | Yes | Thin | Yes | Yes |
| Astro | Yes | No | No | Yes | No |
| Svelte | Yes | No | No | Yes | No |
| Vue | Yes | Yes | No | Yes | No |
| React | Yes | Yes | No | Yes | Yes |
| Angular | No | Yes | No | Yes | No |
| Phoenix/Rails | No | No | Yes (deep) | No | No |
| Account required | No | Yes | Yes | No | Yes |
| Stars | ~130 | ~6,500 | ~1,600 | Experimental | ~24,700 |
Which One Should You Use?
Honest recommendations based on your situation:
If you're a Phoenix/Rails/Django developer: Tidewave is the obvious choice. Jose Valim built it specifically for backend-heavy stacks with deep runtime integration that nothing else matches for those ecosystems.
If you want the most polished experience and don't mind paying: Stagewise. The YC backing shows in the UX quality. If you primarily use React/Next.js/Vue and EUR 20/month doesn't bother you, it's the most mature option.
If you want free + deep framework integration + full control: Frontman. No prompt limits, no account, BYOK, open source. The tradeoff is that it's early-stage with fewer stars and rougher edges. If you're comfortable being an early adopter and filing issues when things break, the runtime integration depth is the deepest available for JS frameworks.
If you want to add browser context to your existing agent: Chrome DevTools MCP. It's bare-bones but framework-agnostic and free.
If you're a designer who wants a visual editor: Onlook. Different category entirely, but the best Figma-like interface for editing React code visually.
If you're building something outside these frameworks: Wait. The category is too young for broad framework coverage. Stick with your current AI tool and check back in 6 months.
The Category Is Real
Six months ago, "AI coding tool that sees your browser" wasn't a category. Now there are at least five projects with different architectures attacking the same problem. Google is building infrastructure for it. The fact that these tools exist across different companies, funding stages, and ecosystems suggests the runtime context gap is a real problem worth solving — not just a marketing angle.
Everything listed here is early. Some of these tools will be dead in a year. Some will be table stakes. The only way to know which is to try them on a real project and see if the workflow improvement justifies the setup cost.
I'm involved with Frontman, so take my perspective accordingly. I tried to be honest about every tool's strengths and weaknesses — if I got something wrong about a competitor, call it out in the comments and I'll correct it.
Top comments (1)
My vote on chrome devtools with mcp, I used that with copilot cli and gemini cli also, that is battletested stuff.