5个能访问浏览器的AI编程工具

AI编程工具——如Cursor、Copilot、Claude Code、Windsurf——都基于源文件工作。它们看不到渲染后的DOM、计算后的样式或客户端的布局几何。它们也看不到服务端已编译的模块图、注册的路由、服务器日志或中间件状态。对于任何有运行时的Web应用，AI对其运行行为的很大一部分都是在猜测。

运行时感知工具试图弥合这一差距。以下是它们各自实现这一目标的方式。

1、Frontman

官网： frontman.sh | 许可证： Apache 2.0 / AGPL-3.0 | Star数： ~131

面向Next.js、Astro和Vite的框架中间件。安装在框架的开发服务器内部，因此它可以原生访问客户端上下文（DOM、组件树、计算后的样式）和服务端上下文（路由、已编译的模块图、服务器日志）。两者都通过MCP暴露。

优势： 最深入的框架集成。完全免费，无提示词限制，无需账户。BYOK——可直接连接Claude、OpenAI或OpenRouter。开源，客户端库许可证宽松。

劣势： 早期阶段。有待完善，文档不完整，社区规模小。仅支持有限的框架。深度抽象的组件库会破坏源码映射。

2、Stagewise

官网： stagewise.io | 许可证： AGPL-3.0 | Star数： ~6,500 | 融资： YC S25

最初是浏览器工具栏，现已演变为支持CLI注入的独立代理。npx stagewise@latest启动一个代理并在运行中的应用中注入工具栏。两种模式：独立模式（托管代理，需要账户）或桥接模式（连接Cursor/Copilot）。

优势： 用户体验最精致。社区活跃。支持React、Next.js、Vue、Angular以及CSS框架。YC背书。

劣势： 每天约10次免费提示词，EUR 20/月可获得约100次/天。需要账户和OAuth。代理架构意味着服务端可见性有限。不支持BYOK——推理通过其服务器进行。不支持Astro或Svelte。

3、Tidewave

官网： tidewave.ai | Star数： ~1,600 | 创建者： José Valim（Elixir创始人）

它本身不是编程代理——而是一个MCP增强层，为现有代理（Claude Code、Codex）提供运行时状态访问。深度后端集成：数据库查询、运行时评估、栈跟踪、实时进程状态。主要面向Phoenix/Elixir。

优势： 无与伦比的深度后端集成。由José Valim打造。可与你现有的代理配合使用。

劣势： JS框架支持薄弱（tidewave_js约28星）。$10/月。非独立运行。如果你是一名JS/TS开发者，这还不是为你准备的。

4、Chrome DevTools MCP (Google)

Google的实验性MCP服务器，将DevTools状态暴露给AI代理。你的代理可以查询DOM、读取控制台输出、检查网络请求。

优势： 官方Google项目。框架无关。免费开源。

劣势： 原始——不含代理。仅限浏览器（无服务端上下文）。实验性。需要手动设置。

5、Onlook（荣誉提及）

"面向设计师的Cursor"——面向React/Next.js的类Figma可视化编辑器。不同品类（可视化设计工具，非运行时感知编程代理），但在"非工程师编辑代码"用例上有重叠。使用沙盒化Web容器，而非真正的开发服务器。

6、你应该使用哪一款？

Phoenix/Rails/Django开发者： Tidewave。深度后端运行时，无其他工具能与之相比。

追求最精致用户体验且不介意付费： Stagewise。YC的背书可见一斑。

追求免费 + 深度框架集成 + 完全控制： Frontman。无提示词限制，无需账户，BYOK，开源。代价是处于早期阶段，边缘情况处理不够完善。

想为现有代理添加浏览器上下文： Chrome DevTools MCP。虽然基础但框架无关且免费。

想要可视化编辑器的设计师： Onlook。完全不同的品类。

这个品类是真实的。六个月前这还不存在。现在有五个项目采用不同架构攻击同一问题。有些一年后就会消亡。有些将成为标配。在真实项目上试试，自己做决定。

原文链接: AI Coding Tools That Actually See Your Browser (2026) | Frontman

汇智网翻译整理，版权归原作者所有，转载时请标明出处。