Page Agent – 阿里开源的 JavaScript GUI 智能体库

1. Page Agent是什么

Page Agent 是阿里巴巴开源的一款纯前端 JavaScript 智能体库，通过一行 <script> 标签嵌入网页，即可让用户用自然语言直接操控页面 DOM 元素。它采用独创的 DOM 脱水技术将复杂页面压缩为精简文本树（FlatDomTree），并支持任何 OpenAI 兼容的大语言模型端点（如通义千问、GPT 系列等）。无需后端服务、无需截图、无需浏览器扩展，Page Agent 即可在客户端浏览器中完成点击、填表、滚动等交互操作，适合为自有 Web 应用快速添加“AI 副驾驶”功能。

技术定位与领域： 属于前端 GUI 智能体（GUI Agent）领域，核心定位是“零改造成本的自然语言网页操控中间件”。它不依赖视觉模型或浏览器自动化协议，而是通过纯文本 DOM 表示让 LLM 理解页面结构并生成操作指令，在客户端 JavaScript 沙箱中执行。

研发背景： 由阿里巴巴开源团队开发，基于对 Web 应用“智能化交互”需求的洞察——传统 AI 助手只能给出文字指引，无法直接帮用户操作页面。Page Agent 旨在弥合自然语言与 UI 操作之间的鸿沟，降低 AI 赋能已有 Web 应用的技术门槛。

核心价值： 解决三个关键痛点：一是无需改造后端或分发浏览器扩展，一行脚本即可集成；二是通过 DOM 脱水大幅降低 Token 消耗，无需昂贵的多模态视觉模型；三是天然继承浏览器会话的认证状态，无需额外处理登录和权限。

技术特点： 采用 Monorepo 分包设计（@page-agent/core、page-agent、@page-agent/page-controller），核心控制器 PageController 负责 DOM 提取与原子操作执行；支持操作白名单、数据脱敏、关键操作人工确认等安全机制；模型无关架构允许灵活切换 LLM 提供商。

2. 主要功能

• 自然语言操控页面： 用户输入“点击登录按钮”、“填写表单”等指令，AI 自动解析意图并定位到对应 DOM 元素，执行点击、输入、滚动等操作。无需编写选择器或脚本，交互方式从“手动操作”转变为“口语指挥”。
• DOM 脱水压缩： 独创的 FlatDomTree 技术将完整 DOM 树扫描后，为每个交互元素分配索引、角色和标签，剥离样式、脚本等冗余信息，生成紧凑文本表示。这大幅降低了 LLM 的输入 Token 数，使得低成本模型也能高效理解页面。
• 模型无关架构： 支持任何 OpenAI 兼容的 API 端点，只需配置 baseURL 和 apiKey 即可切换模型（如通义千问、GPT‑4o、Claude 等）。这意味着用户可以根据成本、延迟或合规需求自由选择 LLM，无需绑定特定平台。
• 内置安全控制： 提供操作白名单（限定 AI 可操作的元素范围）、敏感字段数据脱敏（如密码字段替换为占位符）、关键操作人工确认（弹窗征求用户许可）以及自定义领域知识注入，确保 AI 行为符合业务安全规范。
• 单页交互闭环： 在单个页面内完成从指令解析到 DOM 操作的全流程，无需后端服务或浏览器扩展。所有逻辑运行在用户浏览器会话中，自动继承 Cookie、Session 和认证状态，实现“所见即所控”。
• Monorepo 分包设计： 项目拆分为三个独立包：@page-agent/core 负责无头智能体逻辑（不提供 UI），page-agent 提供完整 UI 面板（含对话界面和操作反馈），@page-agent/page-controller 处理 DOM 提取与索引。开发者可按需选用，实现轻量化集成。
• 零后端改造： 生产环境通过 npm install page-agent 安装，或直接在页面中插入 IIFE 演示脚本 <script> 标签即可激活。无需修改后端代码、无需数据库、无需部署额外服务，真正实现“一行代码集成”。

3. 如何使用

1. 环境要求： 无需特定后端环境，只需一个支持 JavaScript 的现代浏览器（Chrome、Edge、Firefox 等）。LLM 端点需为 OpenAI 兼容格式，例如阿里云通义千问的 API 或本地部署的 vLLM 服务。建议使用 HTTPS 页面以保证 API Key 传输安全。

2. 快速体验（演示模式）： 在任意网页的 <head> 或 <body> 中插入一行 <script> 标签：

   <script src="（链接待官方发布后更新）"></script>
   

   刷新页面后，右下角会出现 AI 操控面板，输入自然语言指令即可体验。

3. 安装依赖（生产模式）： 通过 npm 安装核心库：

   npm install page-agent
   

   然后在项目中导入：

   import PageAgent from 'page-agent';
   

4. 创建实例并配置： 实例化 PageAgent，配置模型端点：

   const agent = new PageAgent({
     model: 'qwen-plus',          // 模型名称
     baseURL: '（链接待官方发布后更新）',
     apiKey: 'sk-xxx',            // 你的 API Key
     // 可选安全配置
     whitelist: ['button', 'input', 'a'],  // 操作白名单
     sensitiveFields: ['password'],        // 敏感字段脱敏
     confirmOnCritical: true,             // 关键操作需确认
   });
   

5. 执行自然语言指令： 调用 execute 方法：

   await agent.execute('点击右上角的“登录”按钮，然后输入用户名和密码');
   

   AI 将解析指令，通过 PageController 定位 DOM 元素并依次执行操作。每次操作后页面状态会更新，支持连续多步指令。

6. 安全配置最佳实践： 建议在生产环境中启用操作白名单，仅允许 AI 操作特定类型的元素（如按钮、输入框、链接）。对于包含敏感数据的页面，使用 sensitiveFields 配置脱敏规则。对于删除、提交等关键操作，设置 confirmOnCritical: true 让用户二次确认。

4. 优缺点分析

5. 同类工具对比

选型建议： 如果你的目标是快速为现有 Web 应用添加 AI 助手，且页面以文本表单、按钮为主，Page Agent 是最佳选择——零后端改造、低成本、自然语言交互。对于需要精确控制浏览器行为的自动化测试（如 CI/CD 流水线中的端到端测试），Playwright 或 Puppeteer 更合适，因为它们支持脚本化的精确操作和多窗口管理。

对于跨浏览器兼容性测试场景，Selenium 依然是标准选择，但它的部署和学习成本较高。Page Agent 目前不支持跨浏览器（仅运行在用户当前浏览器中），因此不适合自动化测试领域。若项目需要同时支持 AI 操控和传统自动化，可考虑将 Page Agent 作为 AI 层封装在 Playwright 之上，但需额外开发。

6. 编辑点评

Page Agent 的技术创新在于“以纯前端方式实现 GUI Agent”，它跳出了视觉模型的高成本陷阱，通过 DOM 脱水将页面结构转化为 LLM 可理解的文本，这是一个既务实又优雅的设计。与当前主流的“截图+视觉模型”方案（如 Apple Ferret UI、CogAgent）相比，Page Agent 的 Token 消耗可降低 10–100 倍，且无需 GPU 推理，使其在成本和响应速度上具有显著优势。同时，它的模型无关架构和 MIT 开源许可降低了使用门槛，任何团队都能快速集成。

从实用价值看，Page Agent 最适合为 SaaS 产品、企业内部系统、老旧遗留系统添加 AI 副驾驶。它解决了“AI 只能建议、不能操作”的痛点，让用户只需说一句话就能完成多步操作。例如，在 ERP 系统中输入“提交昨天午餐 50 元差旅报销”，AI 会自动导航到报销表单、填写字段并提交。这种能力对于提升用户效率和产品体验具有直接价值。

适用人群主要包括：前端开发者（希望快速集成 AI 能力）、产品经理（探索 AI 交互原型）、以及需要为无 API 的旧系统提供现代化交互的运维人员。目前项目处于早期阶段，社区生态和文档尚不丰富，但核心功能已经可用。未来若能在跨页面支持、自定义 DOM 脱水策略以及可视化配置工具上进一步完善，Page Agent 有望成为 Web AI 副驾驶的标准方案。

7. 应用场景

• SaaS 产品 AI 副驾驶： 在自家产品中嵌入 Page Agent，用户可直接用自然语言完成复杂操作，如“将最近三个月的销售数据导出为 CSV 并发送邮件给老板”。AI 会依次执行导航、筛选、导出、发送等步骤，大幅降低用户学习成本。
• 智能表单填写： 对于多步骤的 ERP/CRM 表单（如报销、请假、订单录入），用户只需一句指令，AI 即可自动填写各字段并提交。例如“提交昨天午餐 50 元差旅报销”，系统自动定位报销模块、填写金额和备注、上传附件。
• 无障碍访问： 结合 Web Speech API 实现语音控制网页。视障用户可通过语音指令“点击搜索框，输入天气，按回车”完成操作，无需依赖屏幕阅读器对复杂页面的逐元素遍历。
• 遗留系统现代化： 对于没有 API 的旧系统（如十年前的内部管理平台），在页面中嵌入 Page Agent 即可添加自然语言命令栏，用户可通过指令直接操作，无需改动原始代码或后端逻辑。
• 客户服务辅助： 客服人员在处理工单时，可让 Page Agent 自动执行“在 CRM 中查找客户信息-打开订单历史-复制最近一笔交易 ID”等步骤，提升工作效率。

8. 常见问题FAQ

Q：Page Agent 是否需要后端服务器？
A：不需要。Page Agent 完全运行在客户端浏览器中，所有 DOM 提取、LLM 调用和操作执行都在前端完成。只需配置 LLM 的 API 端点（如通义千问），无需额外部署后端。

Q：支持哪些 LLM 模型？
A：任何 OpenAI 兼容的 API 端点，包括通义千问、GPT-4o、Claude、DeepSeek、本地部署的 vLLM 等。只需在初始化时设置 baseURL 和 apiKey 即可。

Q：如何处理敏感数据（如密码）？
A：Page Agent 支持 sensitiveFields 配置，可将密码字段替换为占位符（如 **），防止 LLM 读取真实值。同时支持操作白名单和关键操作人工确认，确保安全。

Q：能否跨页面操作，例如从页面 A 跳转到页面 B 后继续操控？
A：默认仅支持单页交互。跨页面（如打开新标签页）需要借助 Chrome 扩展或通过 window.open 等方式手动管理。官方计划未来提供跨标签支持。

Q：页面包含大量图片或 Canvas 元素时，AI 能理解吗？
A：不能。Page Agent 仅基于文本 DOM 树，无法理解图片内容、图标含义或 Canvas 绘制的图形。对于重度视觉页面，建议结合截图+视觉模型方案，但 Page Agent 本身不提供视觉能力。

Q：如何自定义 DOM 脱水策略？
A：目前默认策略会提取所有交互元素（按钮、输入框、链接、下拉菜单等），并分配索引。高级用户可通过修改 @page-agent/page-controller 包中的逻辑实现定制，但官方文档尚未提供详细指南。

Q：是否支持移动端浏览器？
A：理论上支持，因为 Page Agent 基于标准 JavaScript 运行。但在移动端小屏幕上，UI 面板的交互体验需自行适配。建议在移动端使用无头模式（@page-agent/core）并自定义 UI。

9. 项目地址

• 项目官网：https://alibaba.github.io/page-agent/
• GitHub 仓库：https://github.com/alibaba/page-agent