金环建设集团有限公司官方网站,杭州动漫设计公司最新招聘,ppt制作教程免费全集,vue做的博客网站先通告。。。Day3#xff0c;我的Github依旧还没解封。。效率贼低。。 ​ 周末刷GitHub的时候#xff0c;老金我看到Vercel Labs推了个新工具。 叫 Agent Browser#xff0c;16.8k星#xff0c;两个月不到就冲到这个数字。 点进去一看#xff0c;这玩意儿是专门给AI Agen…先通告。。。Day3我的Github依旧还没解封。。效率贼低。。​周末刷GitHub的时候老金我看到Vercel Labs推了个新工具。叫 Agent Browser16.8k星两个月不到就冲到这个数字。点进去一看这玩意儿是专门给AI Agent用的浏览器自动化工具。​​说实话老金我一开始没太当回事。Playwright、Puppeteer不是早就能自动化浏览器了吗又是重新造轮子吧但实际测了一圈之后老金我承认想错了。这次Vercel是真的解决了一个大痛点。传统工具的问题AI看不懂CSS选择器先说说为什么需要Agent Browser。传统的浏览器自动化工具比如Playwright是给程序员用的。你得写CSS选择器、XPath这些东西。告诉程序点击class为submit-button的元素。这对程序员来说还行。但对AI Agent来说就是灾难。最大的坑是什么AI Agent每次操作浏览器都得把整个HTML DOM树就是网页的结构代码发给大模型。一个普通网页的HTML轻松几万行。全部塞进上下文Token消耗直接爆炸。​老金我之前用Playwright MCP让AI调用工具的协议让Claude控制浏览器。结果一个简单的登录操作上下文就用掉了2万Token。而且AI还经常选错元素。因为CSS选择器太脆弱了——网页改个class名称整个脚本就废了。当时老金我就在想有没有什么工具能让AI不用看HTML就能操作网页Agent Browser的核心创新用引用代替选择器Vercel的解决方案很巧妙。不让AI去猜CSS选择器而是给每个可交互元素分配一个稳定的引用编号。工作流程分三步第一步AI执行 snapshot命令。 获取页面的accessibility tree无障碍树就是网页里所有能点、能填、能选的元素清单。 这个树自动过滤掉装饰性的div只留可交互的部分。第二步Agent Browser给每个元素分配一个ref编号。 比如 e1、e2、e3。 AI看到的不是几万行HTML而是一个简洁的列表button 登录 [refe1] input 用户名 [refe2] input 密码 [refe3]第三步AI直接用ref编号操作。 click e1点击登录fill e2 admin填用户名。 不需要猜选择器不需要解析DOM结构指哪打哪。这个设计有多厉害根据官方数据Agent Browser比Playwright MCP减少了93%的上下文消耗。原来2万Token的操作现在只要1400 Token。而且ref编号是基于无障碍树生成的。网页改版只要结构不变ref就不会失效。老金我看到这个数据的时候是真的心动了。Token贵啊省93%是什么概念。架构设计三层套娃Agent Browser的架构挺有意思是个三层设计。第一层Rust CLI Rust一种高性能系统编程语言写的命令解析器。 启动速度快资源占用低。 命令行敲 agent-browser open example.com毫秒级响应。第二层Node.js守护进程 后台跑一个常驻进程负责管理浏览器实例。 这个进程会一直保持运行避免每次命令都要重启浏览器。第三层Playwright 底层还是用Playwright控制Chromium。 但封装了一层AI友好的接口。为什么要搞三层Rust保证CLI性能Node.js保证生态兼容性。而且如果Rust二进制文件不可用会自动降级到纯Node.js模式。兼容性拉满。怎么用自然语言控制看到这里你可能会问这不还是命令行工具吗这是老金我一开始最困惑的地方。后来才搞明白——你根本不需要自己敲命令。Agent Browser的设计理念是让AI来当翻译。你用自然语言告诉AI想干什么AI自动生成命令。举个例子你跟Claude说“帮我登录GitHub并创建Issue”。 ---- 你说的是这句话Claude理解你的意图后自动生成一串命令agent-browser open https://github.com/login agent-browser snapshot -i agent-browser fill e1 username agent-browser fill e2 password agent-browser click e3你全程只需要说话AI帮你干活。这就是AI-First设计的核心。如果对你有帮助记得关注一波~实际安装两行命令搞定老金我实际装了一下确实简单。npm install -g agent-browser agent-browser install第一行全局安装CLI工具。第二行下载Chromium浏览器内核。老金我这边261个包18秒装完版本v0.16.1。基础操作就这几个agent-browser open https://example.com agent-browser snapshot -i agent-browser click e1 agent-browser fill e2 用户名 agent-browser screenshot demo.png打开网页、拍快照、点击、填写、截图。五个命令覆盖80%的场景。配合Claude Code使用 如果你在用Claude Code、Cursor这些AI编程工具。 可以直接让AI调用agent-browser命令。 AI会自动分析snapshot结果选择正确的ref编号完成操作。老金我测试了一个场景让Claude自动登录GitHub并创建Issue。用Playwright MCP的话需要写一堆提示词解释DOM结构。用Agent Browser直接说登录GitHub创建IssueClaude自己就搞定了。省心程度差距太大了。对比Playwright什么时候该用哪个Agent Browser不是要替代Playwright。而是针对AI Agent场景做了优化。Agent Browser适合 AI Agent自动化任务爬虫、测试、数据采集 需要频繁交互的场景表单填写、多步操作 上下文预算有限的情况Token贵省着用Playwright适合 传统自动化测试人工编写脚本 需要精细控制的场景复杂等待逻辑、性能监控 已有大量Playwright脚本的项目迁移成本高一句话总结 Agent Browser是AI-First设计优先考虑AI的理解能力。 Playwright是Developer-First设计优先考虑程序员的控制力。老金我的使用建议适合这些人 正在用AI Agent做自动化任务的开发者 想让AI控制浏览器但被Token成本劝退的人 需要快速原型验证的产品经理让AI写脚本自己不用写代码注意这些坑 Agent Browser还在快速迭代当前v0.16.1API可能会变。 复杂页面的无障碍树可能不完整需要手动调整。 如果网页本身的无障碍支持做得差ref可能识别不准。老金我的实际体验 现在老金我做数据采集任务优先用Agent Browser。 配合Claude Code基本上说一句话就能完成整个自动化流程。 省下来的时间老金我能多写两篇文章美滋滋。不过说实话目前也有不爽的地方。 每次 snapshot后ref编号会重新生成。 如果中间页面跳转了之前的ref就全废了得重新拍快照。 这个设计虽然合理但操作多步流程的时候确实有点烦。总的来说瑕不掩瑜。93%的上下文节省这个数字太香了。有兴趣的可以去GitHub上看看star数还在蹭蹭涨。你们用过Agent Browser吗评论区聊聊老金我很好奇大家都拿它做什么。往期推荐AI编程教程列表提示词工工程Prompt EngineeringLLMOPS(大语言模运维平台)AI绘画教程列表WX机器人教程列表开源知识库地址实时更新交流群https://tffyvtlai4.feishu.cn/wiki/OhQ8wqntFihcI1kWVDlcNdpznFfClaude Code Openclaw 双顶流全中文从零开始的教程不懂代码照样造网站老金15万字Claude CodeOpenClaw教程免费开源我的小破站含我开源的项目https://www.aiking.dev/每次我都想提醒一下这不是凡尔赛是希望有想法的人勇敢冲。我不会代码我英语也不好但是我做出来了很多东西在文末的开源知识库可见。我真心希望能影响更多的人来尝试新的技巧迎接新的时代。谢谢你读我的文章。如果觉得不错随手点个赞、在看、转发三连吧如果想第一时间收到推送也可以给我个星标⭐谢谢你看我的文章。