Vercel Agent 浏览器
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_3c6cb52e/vercel-agent-browser。
技能介绍
AI Agent 为什么需要专用浏览器
LLM Agent 无法像人类用户那样直接操作浏览器。当 Agent 需要完成「登录后台并提交表单」这类任务时,模型的意图和真实 DOM 之间必须有一层可编程的接口。传统自动化框架暴露的 API 过于底层,Agent 得手写选择器、处理等待和各种弹窗,这些环节既消耗 token 又容易出错。
Vercel Agent Browser 选择用 CLI 解决这个问题:它把浏览器操作封装成一组命令行工具,Agent 通过调用命令、解析返回的文本来决定下一步动作。
它如何工作
核心流程分三个阶段:
- 感知页面状态:打开页面后生成可访问性快照(accessibility snapshot),内容是语义化的页面结构——标题、按钮、输入框等,远比完整 DOM 更适合模型消费。
- 元素定位与交互:通过可访问名称定位元素,
--name按角色过滤,--exact要求文本完全匹配。相比 CSS 选择器,这种方式对页面结构变化更稳健。 - 状态捕获:操作完成后可截图或重新读取快照,确认页面状态后再规划下一步。
这个「感知—决策—执行」的循环和 Agent 逐步推理的工作方式天然对应。
适用边界与注意点
- 运行环境需要 Node.js 和 Chrome(或 Chrome for Testing),没有浏览器的机器上无法直接工作。
- 默认自动接受 alert 与 beforeunload 弹窗,避免阻塞 Agent;但 confirm 和 prompt 弹窗仍需显式处理。如需关闭自动处理,可使用
--no-auto-dialog或设置环境变量AGENT_BROWSER_NO_AUTO_DIALOG=1。 - 该工具面向命令行驱动的 Agent 场景。如果你的框架已经内置 Playwright 或 Puppeteer 层,再引入它属于重复建设。
使用场景
- Agent 需要登录后台、填写表单并点击提交按钮完成一次完整流程
- 需要定时打开监控页面,截图确认目标内容是否出现
- 为 AI Agent 构建网页感知层,读取页面快照提取结构化信息
- 排查弹窗阻塞问题时区分 alert 与 confirm 并定制处理策略
适合人员
- 开发 AI Agent 的工程师:需要让模型通过命令行可靠地打开页面、点击元素和填写表单
- 编写自动化回归脚本的测试工程师:希望用 CLI 批量驱动浏览器跑网页流程并截图留证
- 搭建 Agent 工作流的技术团队:正在寻找浏览器自动化层作为模型感知与执行网页任务的基础设施
- 处理弹窗阻塞问题的运维人员:需要配置参数控制脚本对 alert 和 confirm 对话框的默认处理方式