您的代理驱动一个真实的浏览器。
不是假的。
AgentsRoom 在每个项目中嵌入一个真实的 Chromium 浏览器,并提供一个让您的 AI 代理控制它的 AgentsRoom Browser MCP 服务器。您的 QA 代理打开您的 localhost 站点,点击按钮、填写表单、截图、读取 console,并在说完成之前验证功能真的可用。面向 Claude Code、Codex、OpenCode、Gemini CLI 和 Aider 的端到端浏览器自动化,零 Playwright 配置。
和 Agent Teams 配对使用:Dev 代理交付功能,QA 代理在嵌入式浏览器中加载 localhost 站点,运行验证场景,截图结果,签收。原生浏览器自动化也已在路线图上,未来规划了面向 React Native 和 Electron 应用的 MCP 服务器,让代理也能测试移动和桌面应用。
AgentsRoom Browser MCP 演示:通过嵌入式 Chromium 浏览器由 Claude Code QA 代理驱动的端到端 web 应用测试。
AgentsRoom 中的 Browser Automation 把两件事合二为一。第一,每个项目 room 中嵌入的真实 Chromium 浏览器,包含 URL 栏、back/forward、reload、history、截图到剪贴板、用默认浏览器打开、按项目持久化的 cookies 和 localStorage。第二,通过 Model Context Protocol 把该浏览器暴露给您的 AI 代理的 AgentsRoom Browser MCP 服务器(agentsroom-browser)。代理获得一个干净、可脚本化的接口:navigate、click、type、screenshot、求值 JavaScript、等待元素、获取页面状态、获取 console 日志、后退、前进、重新加载。
为什么这件事重要?因为当代理说 '功能已交付' 但从不打开页面检查时,AI 编码代理的整个承诺就崩塌了。今天大多数代理依赖运行单元测试,然后祈祷。有了真实的 browser MCP,代理加载 localhost 服务器,跑一遍用户流,看到人类用户会看到的东西,之后才签收。QA Engineer 代理角色终于有了它需要的工具来做真正的 QA,而不只是静态分析。
技术设置对您来说是不可见的。当您在代理上勾选 'Browser access' 时,AgentsRoom 把 agentsroom-browser 条目合并进项目的 .mcp.json,代理启动时就带有可用的浏览器工具。一个运行在 loopback 端口(127.0.0.1,OS 分配,每次启动重新生成,用 32 字节 hex token 认证)上的 WebSocket 桥连接 MCP 子进程到 Electron 应用中的 Chromium WebContentsView。每次点击、每次输入、每次截图都是一次 JSON-RPC 调用。代理看到的是真实浏览器,不是桩。

AgentsRoom Browser 面板:URL 栏、history、截图,以及让 AI 代理 navigate、点击、输入和验证的完整 MCP 控制面。
一个真实的浏览器,不是 Playwright 桩
大多数谈到浏览器自动化的 AI 代理 demo 在每次工具调用时 spawn 一个 headless Playwright 实例。这对 benchmark 有效,但在现实生活中很痛苦:您看不到代理在做什么,每次 navigation 都重新 spawn Chromium,cookies 丢失,localStorage 为空,您的 dev 服务器以为每次访问都是全新会话。AgentsRoom 取另一个角度。浏览器已经在您的项目 room 中打开(您自己像普通浏览器一样使用它),代理驱动那个浏览器。会话、cookies、localStorage、登录状态,全部保留。
代理的每次点击和输入触发通过 Electron WebContentsView 的真实原生分发,带有正确的键事件、鼠标事件和 DOM 变更。截图是从实际渲染页面捕获的真实 PNG(不是 DOM-to-image 的 hack)。console 日志被缓冲并可查询,包括警告和错误。代理看到的和您打开 DevTools 时看到的是同一种东西:真实的性能、真实的网络行为、真实的 CORS、真实的 auth。
Room 间隔离被强制执行。AgentsRoom 为每个项目创建一个 Chromium WebContentsView,带有自己的会话分区(persist:agentsroom-browser-<projectId>)。项目 A 的 cookies 永远不会泄漏到项目 B。当您切换项目时,前一个浏览器被隐藏,新的浏览器以自己的状态上线。代理总是落地在正确的项目,带着正确的凭据。
MCP 层有意保持小巧且零依赖。browser-mcp-server.cjs 子进程通过 stdio 说 MCP 2024-11-05 协议(initialize、tools/list、tools/call),并把它翻译成通过 loopback WebSocket 桥的 JSON-RPC 调用。与重型 SDK 服务器相比,这保持了快速(首次工具调用低于 100ms)和易于调试。在每次改变页面的动作(点击、输入、navigate、reload、back、forward)之后,响应包含一张上限 1.6 MB 的 base64 PNG 截图,这样代理总能看到它刚才做的事的结果。这件事原来是最大的可靠性提升之一:看到屏幕的代理远比抱有希望的代理更频繁地做对事。
您的代理获得的 Browser MCP 工具集
每个有浏览器访问的 AI 代理在启动时就带有这些工具可用。它们通过标准 MCP 暴露,所以任何兼容的 CLI 都看得到:Claude Code、Codex CLI、OpenCode、Gemini CLI、Aider。
browser_navigate
在嵌入式浏览器中打开一个 URL。智能 URL 处理:localhost:3000 会变成 http://localhost:3000,而不是触发 '无法打开应用' 的对话框。返回最终 URL 和加载后的页面截图。
browser_click
通过选择器或可见文本点击元素。真实的原生点击事件,不是 JavaScript 分发。返回点击后的截图,让代理看到动作结果。
browser_type
向 input 或 textarea 输入文本。支持键盘快捷键和提交。真实的键事件,页面的 onChange 处理器会触发。返回输入后的截图。
browser_screenshot
把当前 viewport 捕获为 PNG。适合可视回归检查、设计 QA、前后对比,或与团队其他成员分享 bug 状态。
browser_evaluate
在页面的 main world 中运行 JavaScript 表达式。拿回序列化的结果。代理用它读取页面状态、查询 DOM、检查 Redux store,或触发没有可见按钮的动作。
browser_wait_for
等待元素出现、URL 变化、网络请求完成,或任意 JavaScript 返回 true。避免经典的 '代理点击太快' 竞态。
browser_get_state
读取当前 URL、标题、viewport、滚动位置,以及页面可访问元素的结构化快照。代理需要规划下一动作时的主要输入。
browser_get_logs
拉取 console 缓冲(log、warn、error)。代理能看到您在 DevTools 中看到的同样的 React 警告、hydration 错误、网络失败和运行时异常。bug 报告变成 '这是 console 中的错误'。
browser_go_back / forward / reload
标准的浏览器导航,可脚本化。代理在流程出错时用来回退,或在 Vite、Next.js 或 Expo Metro 的热重载后重新测试页面。
代理用浏览器实际做什么
今天就能用 QA Engineer 角色和 Agent Teams 构建的真实工作流。
每次交接的端到端烟雾测试
连接一个 Dev to QA 团队。QA 代理 navigate 到您的 localhost dev 服务器,点击关键路径(signup、checkout、dashboard),截图结果,仅在没有抛出错误时签收。在人类打开页面前抓住回归。
可视回归 QA
UI 变更上的前后截图。代理在前一个 commit 上加载页面,截图,切换分支,截图,请 Claude 比较。便宜的可视 diff QA,循环中无需 Percy 或 Chromatic。
Console 错误捕猎
代理 navigate 应用,调用 browser_get_logs,发现 React hydration 警告、useEffect 警告、网络 404、CORS 错误、deprecation 通知。把它们作为风险列表报告在团队交接 payload 中,下一个 Dev 代理修复它们。
表单验证测试
代理用有效数据、空字段、边缘情况(XSS 字符串、超长输入、非 ASCII)填写表单。验证验证消息、网络请求、重定向。真实的表单 QA,不是单元测试。
可访问性审计
代理走查页面,通过 browser_get_state 和 browser_evaluate 查询可访问性树,检查 alt 文本、ARIA 属性、焦点管理、键盘导航。带着截图报告问题。
对照 Figma 的设计 QA
和 Figma to AI 代理功能结合。代理加载 Figma 帧,截图,加载 localhost 页,截图,比较间距、字体、颜色、对齐。提交一份不一致清单。
实时预览隧道验证
和 AgentsRoom localhost 隧道配对。代理 navigate 到公开 HTTPS 预览 URL(不是 localhost),验证站点能从外部世界访问,截图,确认相关方真的能打开链接。
从公开 backlog 工单复现客户 bug
公开 backlog 工单带着一个 URL 和复现步骤进来。QA 代理打开 URL,按步骤操作,捕获 console 错误,附上截图,带着干净的复现交接给 Dev。再也没有 '无法复现' 的循环。
代理如何获得浏览器
在您的 room 中打开 Browser 标签
在您的项目 room 中,右侧面板暴露三个标签:Files、Changes、Browser。点击 Browser。面板变宽,侧边栏折叠,一个真实的 Chromium 视图出现。输入 URL 或从项目 history 中选择。
在代理上勾选 'Browser access'
打开 Edit Agent 模态框,展开 Capabilities,勾选 Browser access。AgentsRoom 把 agentsroom-browser 条目合并进项目的 .mcp.json,代理在下次启动时就会看到浏览器工具。
<project>/.mcp.json代理带着 browser MCP 启动
代理 spawn 时,Claude(或 Codex、Gemini 等)初始化 agentsroom-browser MCP 服务器,列出它的工具(browser_navigate、browser_click、browser_type、browser_screenshot、browser_evaluate、browser_wait_for、browser_get_state、browser_get_logs、browser_go_back、browser_go_forward、browser_reload),从此就能驱动浏览器。
代理使用浏览器
代理 navigate、点击、输入、截图、读 console。每个动作经过一个 loopback WebSocket 桥(127.0.0.1,OS 分配的端口,32 字节 hex token,桌面应用每次启动重新生成)。在每个改变页面的动作之后,截图被内联返回,代理在视觉上验证它的动作。
自动定向 localhost 或您的隧道
如果 localhost 隧道在运行,第一次 navigation 会落到隧道 URL。否则,落到第一个被检测到的 dev 服务器。否则,落到 https://localhost:3000。和 Dev Terminals 结合,代理会真的启动 dev 服务器,然后在浏览器中打开它,然后测试它。
验证、截图、交接
当连接到 Agent Teams 时,QA 节点跑它的场景,捕获截图,在交接 payload 中设置 flags.qaPassed。下一个代理继承这个判定。通过去 PM,失败带着测试提示循环回 Dev。
底层细节
给好奇者。浏览器自动化栈是有意保持小巧的。
每个项目都有一个 Chromium WebContentsView(现代 Electron API,不是被弃用的 BrowserView),按从 React 渲染器流过来的边界覆盖在主窗口上。按项目的会话分区在项目间隔离 cookies、localStorage 和认证。默认的离屏边界让代理能在人类打开 Browser 标签前就调用浏览器工具,同时截图有 5 秒超时以避免挂起。
一个轻量 WebSocket 服务器(browser-bridge.ts)运行在 OS 选择的 loopback 端口上,仅绑定到 127.0.0.1。认证使用每次桌面启动重新生成的 32 字节 hex token。桥文件 ~/.agentsroom/browser-bridge.json 持有当前的端口、token 和 PID,每次启动 atomic 重写,所以 MCP 子进程总是拿到新鲜凭据,并带自动重试。
MCP 服务器本身是 browser-mcp-server.cjs,一个零依赖的 Node 脚本,通过 stdio 实现 MCP 2024-11-05 协议(initialize、tools/list、tools/call)。通过手写的 WebSocket 客户端(无 ws,无 @modelcontextprotocol/sdk)和 WebSocket 桥说 JSON-RPC。微小、快速、易审计。作为 extraResources 文件打包进桌面应用,所以每次安装都开箱即用。
原生浏览器支持(超越 MCP 的一等浏览器功能)已在 AgentsRoom 路线图上。在那之上,长期计划包括额外的 MCP,让代理也能驱动非 web 目标:面向移动应用的 React Native MCP 和面向桌面应用的 Electron MCP。同样的想法,同样的 UX:代理不只写代码,还真的运行起跑中的应用。
FAQ
这与 Playwright MCP 或基于 Puppeteer 的浏览器工具有什么不同?
基于 Playwright 和 Puppeteer 的 MCP 在每个会话上 spawn 一个全新的 headless 浏览器。这对无状态任务没问题,但它在调用之间丢失 cookies、localStorage 和 auth,而且人类看不到代理在做什么。AgentsRoom Browser 是人类在应用内使用的同一个浏览器,带按项目持久化的会话,对用户实时可见。代理驱动的是您随时可以看到并接管的窗口。一个更诚实、更可调试的浏览器自动化。
这在所有 AI 供应商上都有效,还是只 Claude Code?
它在 AgentsRoom 支持的每个供应商上都有效:Claude Code、Codex CLI、OpenCode、Gemini CLI 和 Aider。浏览器工具通过这些 CLI 都从 .mcp.json 读取的标准 Model Context Protocol 暴露。代理永远不知道自己在 AgentsRoom 中,它只是看到一组 MCP 工具,像使用任何其他工具一样使用它们。
代理能驱动远程站点吗,还是只能 localhost?
都行。输入任何 URL 然后 go。Localhost(和 host:port 形式)会被智能检测,加上 http:// 前缀,直接打开。公开站点像在任何普通浏览器中一样工作,按项目保留 cookies 和登录状态。和 AgentsRoom localhost 隧道结合,代理还能通过公开 HTTPS URL 驱动您本地的 dev 服务器,这对跨网络和移动 QA 很有用。
browser MCP 安全吗?什么阻止它被滥用?
桥仅绑定到 127.0.0.1,永不绑定 0.0.0.0。端口由 OS 分配(没有易被扫描的固定端口)。每次连接都需要 32 字节 hex token,每次桌面启动重新生成。MCP 子进程仅通过环境变量收到凭据,永不出现在任何被提交的文件中。浏览器访问在 Edit Agent 模态框中按代理 opt-in。如果您移除它,.mcp.json 条目就被移除,代理就不能再使用这些工具。
代理能看到浏览器 console(错误、警告、网络)吗?
能,通过 browser_get_logs。缓冲区持有页面 main world 的 console.log、console.warn 和 console.error 消息。许多真实 bug(React hydration 错误、useEffect 警告、CORS 失败)只在 console 里浮现,从不在单元测试中,所以这成了 QA 代理信号最高的工具之一。
返回给代理的截图怎么处理?它们会消耗很多 token 吗?
在每个改变页面的动作之后,一张 base64 PNG 截图被附加到工具响应,上限 1.6 MB。超过的话,发送一个文本标记代替。截图对可靠性至关重要(看得到屏幕的代理犯错少得多),所以这个权衡是值得的。如果您想出于预算原因禁用截图,单纯的 browser_evaluate 调用只返回文本。
代理能填登录表单吗?能持久化它的会话吗?
能。Cookies 和 localStorage 在 persist:agentsroom-browser-<projectId> 会话分区下按项目持久化。代理可以用 browser_type 和 browser_click 登录一次,并在整次运行的剩余部分保持登录。当您切换项目时,会话改变,所以凭据永不在项目间泄漏。
如果 dev 服务器没在跑,代理会崩溃吗?
它会 navigate 到 URL 并看到 Chromium 错误页。它能通过 browser_get_state 和 browser_get_logs 读取那个错误并相应反应:请您启动服务器,或调用 Dev Terminals 命令来启动。配合 Agent Teams 和 Dev Terminals,您可以连接一个工作流,先启动服务器、等待,再打开浏览器,全程无需人工干预。
也支持移动应用和桌面应用吗?
Web 今天就在出货,通过嵌入式 Chromium 和 AgentsRoom Browser MCP。路线图包括作为一等浏览器功能的原生 AgentsRoom Browser。在那之上,已规划额外的 MCP 服务器:让代理能驱动 iOS 和 Android Expo bundle 的 React Native MCP,以及让代理能驱动非 web 桌面应用的 Electron MCP。同样的代理逻辑,应用到非 web 目标。
人类能暂停代理并接管浏览器吗?
能。浏览器是人类使用的同一个 Chromium 视图。任何时候,在 Browser 面板里点击,您就在控制中。一旦您停止交互,代理可以恢复它的工具调用。没有 '代理锁定的浏览器' 概念,它是一个共享面,就像结对编程会话一样。
给您的代理装上真正的浏览器之眼
在 AgentsRoom 的任何代理上勾选 Browser access。Browser MCP 自动启动。您的 QA 代理终于在测试它交付的东西。
配套应用:随时随地监控你的 Agent
支持 Claude、Codex、OpenCode、Gemini CLI 和 Aider
把 Bug 和需求直接发送到您的公开待办清单。