在浏览过众多 AI 产品和开源项目的过程中，我发现一个有趣的现象：当 AI Agent 需要与浏览器交互时，往往面临一个核心难题——如何在有限的 Token 预算内，让 AI 高效地理解和操作页面元素。

最近发现的 Vercel 开源项目 agent-browser（22.4K Stars）提供了一个有针对性的解决思路，值得深入了解。

项目概览

agent-browser 是一款专为 AI Agents 设计的浏览器自动化命令行工具。

与通用的浏览器自动化框架（如 Playwright、Selenium）不同，它的核心设计理念是最小化上下文消耗，通过结构化输出格式让 AI 模型更高效地理解页面状态。

核心特性对比

功能体系

1. 核心操作命令

• 导航与页面管理：网页打开、关闭、刷新等基础操作
• 页面解析：以可访问树形式提取页面结构，配合 ref 标签进行精确定位
• 交互操作：点击、输入、表单提交等常见用户操作
• 媒体捕获：页面截图、视频录制等
• 页面等待：支持多种加载条件判断（networkidle、domcontentloaded 等）

2. Agent 专用设计

Ref 基础交互模式：每个可交互元素都被标记唯一 ref（如 @e3、@e26），AI 只需返回 ref 值而无需理解 CSS 选择器或 XPath，降低指令复杂度。

Session 隔离：支持多个独立浏览器实例，可模拟不同用户身份或并行执行多个任务。

快速开始

安装步骤

前置要求：Node.js 环境

# 全局安装 CLI 工具
npm install -g agent-browser

# 下载 Chromium 浏览器引擎
agent-browser install

首次运行 install 命令会下载 Chromium、FFmpeg 等依赖，总体大小约 250+ MiB。安装完成后会输出确认信息。

基础使用流程

打开网页

agent-browser open https://example.com

获取页面结构

agent-browser snapshot -i

输出示例：

- link "Home" [ref=e1]
- button "Submit" [ref=e2]
- input "Search query" [ref=e3]

通过 Ref 执行交互

agent-browser click @e2          # 点击 ref=e2 的元素
agent-browser type @e3 "search"  # 在 ref=e3 输入框输入内容

页面截图

agent-browser screenshot ./output.png

关闭浏览器

agent-browser close

与 AI Agents 集成

通过 Skills 扩展集成

支持在 Claude Code、Cursor、LM Studio 等 AI 环境中直接使用：

npx skills add vercel-labs/agent-browser --skill agent-browser

集成后，AI 可以理解 agent-browser 的工具调用，自动组织命令序列完成复杂任务。例如：

claude --model qwen3.5-35b-a3b
# 然后输入自然语言任务：
# "保存 https://example.com 的截图到当前目录"

AI 会自动：

1. 调用 agent-browser open 打开网页
2. 调用 agent-browser wait 等待加载完成
3. 调用 agent-browser screenshot 保存截图

应用场景

• 自动化测试：AI 驱动的端到端测试，无需编写传统测试脚本
• 数据采集：AI Agent 浏览网站并提取结构化数据
• RPA 流程：配合 AI 决策，实现复杂业务流程自动化
• 移动 Web 测试：支持 iOS Safari 模拟器控制，适配移动应用场景
• 远程浏览器操作：CDP（Chrome DevTools Protocol）模式支持连接本地或远程浏览器实例

相关项目参考

若需要对比评估，可参考以下项目：

• Playwright：通用浏览器自动化，学习曲线陡峭，Token 消耗较大
• Selenium：成熟的自动化框架，但同样不为 AI 上下文优化
• Puppeteer：Node.js 原生，轻量但缺少 AI 友好的交互模式

相比之下，agent-browser 的差异化优势在于显式的 AI 优化设计，这在大规模 Token 成本计算中能产生显著差异。

配置与扩展

环境配置

• 支持自定义 Chromium 路径
• 支持代理配置（代理服务器 URL 传入）
• 支持自定义用户代理字符串

高级特性

• 多 Session 管理：通过 session ID 维护独立的浏览器状态
• CDP 连接模式：直连 Chrome DevTools Protocol 端点
• 视频录制：调试和审计浏览器操作

总结

agent-browser 的价值定位很清晰：它不是要替代通用自动化工具，而是填补 AI Agent 在浏览器交互领域的专用需求。

通过 93% 的上下文消耗减少和 Ref 基础的交互模式，它让 AI 模型能以更低的成本和更高的准确度理解和操作页面。

对于正在构建 AI Agent 应用、RPA 系统或自动化测试框架的团队，这是一个值得评估的工具。特别是在 Token 成本和模型精度成为核心考量时，专用工具往往比通用方案更具性价比。

建议的使用路径是：从小规模任务开始集成（如单页面操作），逐步扩展到复杂多步骤流程。同时关注官方文档中的 Skills 生态，充分利用与 AI IDE 的原生集成能力。

官方文档：https://agent-browser.dev/

项目地址：https://github.com/vercel-labs/agent-browser