阿里开源 Page Agent：纯前端页内 GUI Agent，一句话点击填表不是梦
说明：文中 CDN 版本号、国内镜像等请以 GitHub README 与 官方文档 为准。
一、我们到底在解决什么问题
后台系统、ERP、CRM、内部运营平台往往表单多、步骤长。用户常见诉求是：「帮我把这一页该点的点了、该填的填了。」传统做法有两类：
- 服务端自动化：Playwright、Puppeteer、Selenium 等，适合批处理、无人值守、跨站点脚本，但要维护浏览器集群或任务队列，和「用户正在看的这一页」耦合弱。
- RPA 或录制脚本：偏重桌面或固定流程，对现代 SPA、动态 DOM 的适配成本高。
Page Agent 走的是另一条路：把 Agent 嵌进网页里——用户用自然语言下指令，Agent 在当前页面的 DOM 上解析意图并执行点击、输入等操作。它由 阿里巴巴开源（MIT 协议），定位是 纯前端增强，适合给自家产品加「页内 Copilot」、智能填表、辅助无障碍操作等，而不是替代服务端爬虫或无头浏览器农场。
二、Page Agent 是什么：核心定位一张表
| 维度 | 说明 |
|---|---|
| 运行位置 | 浏览器内 JavaScript，默认无需 Python、无需无头浏览器 |
| 感知方式 | 以 文本 DOM 为主，一般不依赖截图，多数场景不必上多模态视觉大模型 |
| 模型接入 | 支持多种 OpenAI 兼容 接口（具体列表见官方 Models） |
| 协议 | MIT |
| 典型场景 | 站内 Copilot、长表单智能填写、运营后台「一句话办事」、结合语音/读屏的无障碍辅助 |
| 不太适合 | 大规模爬虫、服务端无人值守批量任务、强跨域匿名抓取（请用传统自动化栈） |
与 browser-use 等项目的思路有相通之处（DOM 与提示工程），但 Page Agent 强调 客户端、页内、产品内嵌，和 Playwright 在服务端开浏览器 是互补关系，不是替代关系。
用一张简图理解数据流：
用户自然语言指令
Page Agent 页内运行时
大模型 API
当前页 DOM 操作
三、能力边界：什么时候选它，什么时候别硬上
适合：
- 希望在自己公司的 Web 产品里 提供「对话式操作当前页」；
- 智能填表、分步引导、降低培训成本；
- 需要 无障碍 方向：语音指令 + 自然语言操控页面（需结合产品与合规设计）。
不适合：
- 要 7×24 服务端 跑千个浏览器实例做抓取；
- 要强依赖 视觉截图 才能识别的复杂画布类页面（非其默认强项）；
- 期望 零配置 替代完整 RPA 平台治理与审计（仍需你在产品层做权限与日志）。
四、两种集成路径：评测一行脚本 vs 生产 NPM
4.1 一行 Script：最快上手（注意条款）
官方提供 demo 构建，通过 CDN 引入即可在页面上试玩，往往带评测用模型，适合技术验证。不适合直接当生产依赖：有使用条款与隐私约定，务必阅读仓库内 terms-and-privacy。
HTML 示例（版本号请到官方 README「One-line integration」表格核对最新版与国内镜像）：
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/page-agent.demo.js"crossorigin="true"></script>4.2 NPM 集成：推荐用于正式产品
npminstall page-agent import{ PageAgent }from'page-agent';const agent =newPageAgent({model:'qwen3.5-plus',baseURL:'https://dashscope.aliyuncs.com/compatible-mode/v1',apiKey:'YOUR_API_KEY',language:'zh-CN',});await agent.execute('点击登录按钮');model、baseURL、apiKey必须与你选择的厂商 OpenAI 兼容接口 一致。- 更多能力（面板 UI、人机协同、事件回调等）见官方 Overview。
4.3 生产环境安全提示（发文可强调「踩坑」）
- 不要把 apiKey 明文写进前端仓库或长期暴露在打包产物里；更稳妥的方式包括：构建时注入 CI 密钥（仍属前端可见，需配合域名白名单与限流）、或由 后端签发短期 Token、网关代理模型请求等——按公司安全规范选型。
- 页内 Agent 能操作 DOM，意味着要在 权限与敏感操作 上与后端校验一致，避免「前端能点、后端未鉴权」的漏洞。
五、跨页与「外部 Agent」：扩展与 MCP
默认 Page Agent 聚焦 当前页面。若需要 多标签、整浏览器上下文，可关注官方 Chrome 扩展 说明：
Chrome Extension
若希望 Claude Desktop、本地 Agent 等通过标准协议遥控浏览器，可了解 MCP Server（Beta）：
MCP Server
这两项属于增强能力，接入前请阅读官方限制、隐私与版本状态。
六、与本文相关的本地知识沉淀（A-AI 文档工作区）
工作区已将 Page Agent 整理为 Cursor Skill，便于以后写代码时快速对齐官方集成方式：
- Skill 路径：
.cursor/skills/page-agent/SKILL.md - 参考链接汇总：
.cursor/skills/page-agent/reference.md - 对话摘要：
05_沉淀/Ai对话记录/2026-03-24_Page-Agent技能.md
02_知识库/Ai学习沉淀 目录侧重学习路线与案例索引，本文可作为其中一篇 对外分享用成稿，复制到 ZEEKLOG 编辑器后按需改标题、插图与声明即可。
七、参考链接（建议文末保留，方便读者跳转）
| 资源 | 链接 |
|---|---|
| 官网 / Demo | https://alibaba.github.io/page-agent/ |
| 文档总览 | https://alibaba.github.io/page-agent/docs/introduction/overview |
| 模型与端点 | https://alibaba.github.io/page-agent/docs/features/models |
| Chrome 扩展 | https://alibaba.github.io/page-agent/docs/features/chrome-extension |
| MCP Server | https://alibaba.github.io/page-agent/docs/features/mcp-server |
| npm 包 | https://www.npmjs.com/package/page-agent |
| 源码仓库 | https://github.com/alibaba/page-agent |
八、结语
Page Agent 把「GUI Agent」从实验室和服务器里，搬到了 用户正在使用的网页里：技术栈对前端同学友好，协议宽松（MIT），和现有大模型生态（OpenAI 兼容）对接顺滑。把它用在 对的场景——产品内 Copilot、智能填表、辅助操作——往往比为了演示而堆无头浏览器更轻、更可控。
若你正在做类似需求，建议先 CDN demo 验证交互，再 NPM + 自有模型 落地，并同步把 安全、审计、权限 设计进产品，而不是只停留在 Demo。
