AI 能读网页但点不了按钮？今天把整个浏览器直接交给它——agent-browser 把网页操作从人手里彻底接过去了

我让 AI 帮我在网站上点个按钮，它返回给我一行 HTML——然后告诉我按钮在第三行。

这大概是所有 AI coding agent 都会踩的坑：它能读网页，但没法真正”操作”网页。那些需要 JavaScript 动态渲染、要登录状态、有点击交互的现代网站，在 AI 眼里就是一团读不懂的静态源码。

这个坑，今天终于有人正经解决了。

Vercel Labs 出的 agent-browser（https://github.com/vercel-labs/agent-browser），GitHub 29.9K Stars，上周装量 18.7 万次——它让 AI agent 真正控制一个 Chrome 浏览器，而不是拿个 HTTP 客户端去抓源码。

三个能力，把 AI 变成”真人用户”

传统方案（fetch / Playwright stealth）为什么卡住了？

你让 AI 去自动发帖或者采数据，Playwright 跑不到五分钟——账号被封了。不是你代码写得差，是整条技术路线就走错了。AI 拿到的只是渲染前的 HTML，JavaScript 执行完什么样、登录状态有没有维持、点击后页面跳没跳转——它全靠猜。

agent-browser 换了一条路：直接控制真实 Chrome。

能力一：元素级操作

不只是读 HTML，是真的在页面上找元素、点按钮、填表单、等跳转。 CDP（Chrome DevTools Protocol）把每个 DOM 节点的信息都给到 AI，包括 shadow DOM、iframe 嵌套这些以前根本够不着的地方。

能力二：截图即视觉反馈

每次操作完，CDP 能把当前页面状态截图返回给 AI。这是关键——AI 不再只靠 HTML 猜页面长什么样，它是真看见了。对那些 AI 生成结果需要人工验收的工作流，这个能力直接把人工验收环节砍掉一半。

能力三：JavaScript 执行

页面里有些交互是程序逻辑触发的，不走 DOM 事件。agent-browser 支持直接在页面上下文里跑 JS，相当于 AI 有了一个”在目标页面里执行任意逻辑”的通道。

接进 Claude Code，三步搞定

chrome-devtools-mcp 是官方出的 MCP server，专门给 Claude Code 用。它让 Claude 直接控制浏览器，不需要装 Playwright，不需要配 stealth 插件。

安装步骤：

第一步：装 chrome-devtools-mcp

claude mcp add chrome-devtools-mcp -- npx -y @anthropic-ai/chrome-devtools-mcp

重启 Claude Code，验证工具注册成功。会看到这些新工具：browse, click, fill, evaluate, screenshot。

接上之后，Claude 能做的事情变了：

你：去 Twitter 帮我搜 “Claude Code MCP”，找点赞最高的那条，截图给我看
Claude：调用 chrome-devtools-mcp 的 browse 工具打开 twitter.com，填入搜索词，执行搜索，按点赞排序，取第一条，调用 screenshot 截图返回

全程不需要你开浏览器，不需要手动操作。Claude 看到的是和你肉眼看到的同一个页面。

为什么这是 AI coding agent 的下一步

MCP 补上了 AI 和外部世界之间的那个缺口——但浏览器是最大的那个缺口，因为现代 Web 根本不是”内容”，是”应用”。

agent-browser 这类工具让 AI 的能力从”读网页”升级到”操作网页”。这意味着：

自动化测试不需要人盯着跑了——AI 可以自己点、自己看结果、自己报 bug

数据采集不再受 JavaScript 渲染限制——动态页面、登录墙、 SPA 全部能跑

UI 验收从人工变成 AI 对比截图——Design QA 的成本从天级压到分钟级

下一步

如果你用 Claude Code，试一下：

claude mcp add chrome-devtools-mcp -- npx -y @anthropic-ai/chrome-devtools-mcp

然后让它打开一个你经常要操作的网站，试一个你平时要手动点的流程。你会发现，AI coding agent 能做的事情比以前多得多。