您的代理驱动一个真实的浏览器。
不是假的。
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。再也没有 '无法复现' 的循环。
指向一个元素,直接发给智能体
驱动浏览器只是故事的一半。有时发现问题的是你自己:一个没对齐的按钮、一个文案写错的标签、一张在手机上错位的卡片。与其用文字描述,不如直接指向它。内置浏览器有一个指向模式:点击页面上任意元素,AgentsRoom 就会从实时 DOM 中捕获它精确的 CSS 选择器。
再加上一句简短备注,比如「收紧这里的间距」或「这里颜色不对」,被指向的元素连同你的批注就会作为精确、无歧义的修改请求发给当前活跃的智能体。再也不用说「左数第三张卡片」:智能体一次性拿到选择器、周边上下文和你的意图。
AgentsRoom 浏览器的指向模式:点击一个元素,加上备注,精确的选择器连同你的批注就会作为指向修改发送给智能体。
进入指向模式
在你的应用上打开内置浏览器,点击指向按钮。鼠标悬停时,每个元素都会高亮。
点击元素
点击你想修改的按钮、文本块或卡片。AgentsRoom 会锁定它,并从实时 DOM 中读取它精确的 CSS 选择器。
加上备注并发送
输入需要修改的内容并确认。选择器、周边上下文和你的备注会作为指向修改交给当前活跃的智能体。
代理如何获得浏览器
在您的 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 面板里点击,您就在控制中。一旦您停止交互,代理可以恢复它的工具调用。没有 '代理锁定的浏览器' 概念,它是一个共享面,就像结对编程会话一样。
关于 : 智能体委派
让更便宜的 QA 智能体来开浏览器,不是你的 dev 智能体
Browser MCP 在 dev 智能体不直接驾驶它时表现最佳。智能体委派通过一次 run_qa_test MCP 调用将浏览器测试路由到一个独立的更便宜的 QA 智能体。你的 Opus 或 Codex 留在代码上专注,QA 智能体在更小的模型上做点击,判定一行返回。同样的 Browser MCP,更轻的账单,更干净的上下文。
阅读智能体委派页面给您的代理装上真正的浏览器之眼
在 AgentsRoom 的任何代理上勾选 Browser access。Browser MCP 自动启动。您的 QA 代理终于在测试它交付的东西。
配套应用:随时随地监控你的 Agent
使用 Claude、Codex、Gemini CLI 或其他 AI 提供商。
把 Bug 和需求直接发送到您的公开待办清单。
AgentsRoom 实际运行一瞥。