AI Agents专用浏览器自动化CLI工具22K星标大幅降低93%上下文

首页

AI资讯

热心网友

转载

2026-05-28

如何让AI Agent高效操作浏览器，是当前开发者面临的核心技术挑战。传统自动化工具并非为AI场景设计，在上下文理解与指令执行上存在显著效率瓶颈。近期，Vercel开源了一款名为agent-browser的CLI工具，为这一难题提供了极具创新性的解决方案。官方数据显示，它能将AI驱动浏览器自动化所需的上下文数据量降低高达93%，这背后的技术原理是什么？

22.4K Stars，减少 93% 上下文。AI Agents 专用浏览器自动化 CLI 真强！

简而言之，agent-browser是一款专为AI Agents优化的浏览器自动化命令行工具。它并非通用爬虫框架，其核心设计理念完全聚焦于“如何让大型语言模型更省力、更精准地理解和控制浏览器交互”。

agent-browser 的核心优势与特点

那么，这款工具如何实现效率的飞跃？关键在于其以下几项突破性设计：

功能全面覆盖：集成了导航、表单填写、元素点击、页面截图等超过50种浏览器操作指令，满足绝大多数自动化测试与数据抓取需求。
全平台兼容：完美支持macOS、Windows及Linux操作系统，极大简化了跨环境部署与配置流程。
基于引用的智能快照：这是其大幅节省Token的关键。执行snapshot命令后，返回的不是冗长的HTML源码或完整DOM树，而是一个附带唯一引用标识（refs）的简洁可访问性树。AI只需记住类似@e26的引用符，即可精确定位目标元素，彻底避免了重复解析复杂页面结构的开销。
为AI原生优化：所有输出格式均经过特殊设计，旨在为LLM提供最精简、最相关的上下文信息，从而显著降低提示词消耗与API调用成本。
多会话隔离：支持创建多个独立的浏览器实例，每个实例可维持不同的用户登录状态与Cookie，非常适合需要多账户管理或环境隔离的复杂自动化任务。

如何安装 agent-browser

安装过程十分简便。首先，请确保您的系统已安装Node.js运行环境。

第一步，通过npm全局安装该CLI工具：

npm install -g agent-browser

安装成功后，需执行以下命令以下载必需的Chromium浏览器内核：

agent-browser install

此过程将自动下载Playwright框架及对应的Chromium版本。您将看到类似如下的下载进度提示，请等待其完成：

Installing Chromium browser...
Need to install the following packages:
playwright@1.58.2
Ok to proceed? (y) y
Downloading Chrome for Testing 145.0.7632.6 (playwright chromium v1208) from https://cdn.playwright.dev/builds/cft/145.0.7632.6/mac-arm64/chrome-mac-arm64.zip
162.3 MiB [====================] 100% 0.0s
Chrome for Testing 145.0.7632.6 (playwright chromium v1208) downloaded to /Users/abao/Library/Caches/ms-playwright/chromium-1208
...
✓ Chromium installed successfully

agent-browser 基础使用教程

安装完成后，即可体验其核心工作流。整个操作逻辑清晰直观。

1. 打开目标网页

agent-browser open https://agent-browser.dev/

成功后将返回简洁的确认信息。

2. 获取页面可访问性树（智能快照）

这是提升效率的核心步骤。使用-i参数获取带引用标识的快照：

agent-browser snapshot -i

输出不再是复杂的HTML代码，而是结构清晰的元素列表，每个可交互元素都附带了唯一的ref标识（如[ref=e26]）：

- link "Made with love by Vercel" [ref=e1]
- link "agent-browser" [ref=e2]
- link "16k" [ref=e3]
...
- button "Ask AI" [ref=e26]

3. 通过引用标识进行元素交互

现在，若要点击“16k”链接，无需向AI描述其CSS选择器或XPath路径，直接使用对应的ref即可：

agent-browser click @e3

4. 对网页进行截图

agent-browser screenshot ./page.png

5. 关闭浏览器实例

agent-browser close

集成AI技能（Skills）实现自然语言操控

单独使用CLI已足够强大，但agent-browser的真正潜力在于与AI编程助手（如Cursor、Claude Code）的深度集成。通过安装其Skill，您可以直接使用自然语言向AI下达复杂的浏览器操作指令。

安装Skill的命令如下：

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

安装后，以在Claude Code中调用指定模型（例如qwen3.5-35b-a3b）为例：

claude --model qwen3.5-35b-a3b

之后，您只需输入一句自然语言指令，例如：“将 https://agent-browser.dev/ 网页截图保存到当前目录”。AI便会自动规划步骤，调用agent-browser的技能来执行：

❯ Sa ve a screenshot of the https://agent-browser.dev/ webpage to the current directory.
  ⎿  Initializing…
  ⎿  Invalid tool parameters

⏺ Skill(agent-browser)
  ⎿  Successfully loaded skill · 2 tools allowed

⏺ I'll na vigate to the webpage and take a screenshot.

⏺ Bash(agent-browser open https://agent-browser.dev &&
      agent-browser wait --load networkidle && agent-browser
      screenshot screenshot.png)
  ⎿  ✓ Headless Browser Automation for AI
       https://agent-browser.dev/
     ✓ Done
     ✓ Screenshot sa ved to screenshot.png

整个过程实现全自动化，开发者得以从繁琐的脚本编写中解放，只需专注于定义任务目标。

总结与展望

以上演示的仅是agent-browser的基础功能。实际上，它的能力边界更为广阔：例如，它可以控制iOS模拟器中的Safari浏览器，用于移动端Web应用的兼容性测试；它还支持Chrome DevTools Protocol模式，能够轻松连接本地或远程已开启的浏览器进行实时调试。

此外，Vercel团队围绕其生态还提供了其他实用的Skill，如dogfood、electron和slack等，进一步拓展了AI Agent在软件测试、桌面应用自动化及团队协作等场景的应用。如果您正在寻找一种能显著提升AI与浏览器交互智能性与效率的解决方案，那么agent-browser及其丰富的技能生态，无疑是一个值得您深入研究和采用的强大工具。

来源:https://www.53ai.com/news/OpenSourceLLM/2026031605794.html

免责声明：游乐网为非赢利性网站，所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系youleyoucom@outlook.com。

上一篇：AI生成动物视频动作僵硬如何优化流畅度下一篇：Qoder全栈开发实战：文件上传接口实现教程