每日热门skill:93% Token节省!Vercel开源的AI浏览器神器,让Claude Code秒变网页操作专家
当AI遇上浏览器,不是简单的"打开网页",而是一场交互范式的革命。
一、痛点:AI操作浏览器的三大噩梦
你有没有遇到过这种情况?
让AI帮你登录一个网站查数据,结果它在CSS选择器上折腾了半小时——class名变了,脚本挂了;页面结构微调,定位失效了。更崩溃的是,一个简单表单填写,AI的上下文窗口就被DOM树塞爆了——15,000+ token只用来描述页面结构,还没开始干活呢。
这就是传统浏览器自动化工具的死结:
- 选择器脆弱:CSS路径像玻璃一样易碎
- Token黑洞:完整可访问性树吞噬上下文
- 启动龟速:每次初始化浏览器像在等快递
而今天要介绍的agent-browser,用一套"快照+引用"系统,把这些问题一次性解决。
二、agent-browser是什么?
agent-browser是 Vercel Labs 开源的浏览器自动化CLI工具,专为AI Agent设计。它不是什么新发明的浏览器,而是给AI装上了一双"能看懂网页的眼睛"和"能操作网页的手"。
核心数据
| 指标 | 数值 |
|---|---|
| GitHub 地址 | https://github.com/vercel-labs/agent-browser |
| 开发者 | Vercel Labs |
| OpenClaw 排名 | 必装 Skills Top 2 |
| 命令数量 | 108+ |
| 启动时间 | < 50ms |
| Token节省 | 93%(相比 Playwright MCP) |
一句话定位
agent-browser = AI原生浏览器自动化工具,用"语义定位"替代"CSS选择器",用"元素引用"替代"DOM树_dump"。
三、核心创新:快照+引用系统
传统工具的做法是:把页面完整的可访问性树扔给AI——几千个节点,15,000+ token,AI还没开始思考就喘不过气了。
agent-browser的做法是:拍一张"快照",只给AI看关键元素。
工作原理
传统方式: DOM树 → 完整可访问性树(15,000+ token)→ AI决策 → 操作 agent-browser方式: 页面快照 → 精简元素引用(@e1, @e2, @e3)→ AI决策 → 操作实际对比
假设你要让AI填写一个登录表单:
传统工具需要的输入:
页面有 1,247 个元素,其中可交互元素 89 个... [div] [form class