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

Page Agent 是阿里巴巴推出的一款纯前端 JavaScript 智能体库，它能够通过一行代码嵌入网页，让用户借助自然语言直接操控页面上的 DOM 元素。该客户端库运用 DOM 脱水技术，将原本复杂的页面结构压缩为精简的文本树，从而支持任意兼容 OpenAI 的模型。整个过程无需后端参与、不依赖截图或浏览器扩展，即可完成点击、填表、滚动等交互操作，非常适合为现有的 Web 应用快速添加一个 AI 副驾驶功能。接下来，文章将详细介绍它的核心功能、技术原理以及使用方法。

1. Page Agent是什么
   Page Agent 是阿里巴巴开源的纯前端 JavaScript 智能体库，通过一行代码嵌入网页，可让用户用自然语言操控页面 DOM 元素。客户端库采用DOM 脱水技术将复杂页面压缩为精简文本树，支持任何 OpenAI 兼容模型，无需后端、截图或浏览器扩展，即可实现点击、填表、滚动等交互，适合为自有 Web 应用快速添加 AI 副驾驶功能。

   

2. Page Agent的主要功能
   1. 自然语言操控页面：用户输入点击登录按钮、填写表单等指令，AI 自动定位并执行 DOM 操作
   2. DOM 脱水压缩：将复杂页面结构压缩为 FlatDomTree 文本树，仅提取交互元素，降低模型输入成本
   3. 模型无关架构：支持任何 OpenAI 兼容端点（如通义千问、GPT 等），只需配置 baseURL 和 API Key
   4. 内置安全控制：支持操作白名单、敏感字段数据脱敏、关键操作人工确认，以及自定义领域知识注入
   5. 单页交互闭环：在单个页面内完成点击、输入、滚动等操作，无需后端服务或浏览器扩展
3. Page Agent的技术原理
   1. DOM 脱水（DOM Dehydration）：扫描页面 DOM，为每个交互元素分配索引、角色和标签，剥离冗余标记，生成紧凑文本表示供模型理解。
   2. PageController 架构：核心控制器负责更新 DOM 树、执行元素点击、文本输入、页面滚动等原子操作。
   3. Monorepo 分包设计：@page-agent/core 负责无头智能体逻辑，page-agent 提供完整 UI 面板，@page-agent/page-controller 处理 DOM 提取与索引。
   4. 客户端沙箱运行：直接运行在用户浏览器会话中，继承 Cookie、Session 和认证状态，无需额外后端。

   

4. 如何使用Page Agent
   1. 快速体验：在网页中插入一行 标签引入 Page Agent 的 IIFE 演示脚本，即可在页面上激活 AI 操控面板。
   2. 安装依赖：生产环境通过 npm install page-agent 安装依赖包，将其引入到你的前端项目中。
   3. 创建实例：用 new PageAgent() 创建实例，配置 model、baseURL、apiKey 等参数指向你的 OpenAI 兼容模型端点。
   4. 执行指令：调用 agent.execute('你的自然语言指令') 让 AI 解析指令并自动在页面 DOM 中定位元素、执行点击或输入等操作。
   5. 安全配置：可选配置操作白名单、数据脱敏规则和关键操作确认，确保 AI 行为符合安全与业务要求。
5. Page Agent的核心优势
   1. 零后端改造：嵌入一行脚本即可，无需重写后端或分发浏览器扩展。
   2. 低成本运行：仅传输文本 DOM 结构，无需多模态视觉模型，显著降低 Token 消耗。
   3. 原生安全继承：页面原有的 UI 校验、权限规则继续生效，敏感数据可脱敏。
   4. 模型无关：支持任何 OpenAI 兼容端点，切换模型仅需改 baseURL。
   5. MIT 开源：TypeScript 编写，代码完全开放，可自由定制。
6. Page Agent的项目地址
   1. 项目官网：https://alibaba.github.io/page-agent/
   2. GitHub仓库：https://github.com/alibaba/page-agent
7. Page Agent的同类竞品对比 维度 Page Agent Playwright 运行位置页面内部（客户端 JavaScript）外部进程（Node.js/Python/.NET） 页面读取脱水文本 DOM（FlatDomTree）CDP 协议直接访问浏览器 DOM 交互方式自然语言指令驱动代码脚本精确控制 模型依赖需 LLM 解析指令无需 AI 模型，纯规则执行 部署方式嵌入一行 或 npm 安装安装浏览器驱动 + 运行时环境 认证状态自动继承用户浏览器 Cookie/Session需手动配置上下文或登录流程 视觉能力无，纯文本 DOM支持截图、视觉比对、录屏 跨页能力单页为主，跨标签需 Chrome 扩展原生支持多标签、多窗口、多浏览器 适用场景为已有 Web 应用添加 AI 副驾驶端到端自动化测试、跨站爬虫 学习成本低，用户自然语言即可中，需编写选择器和脚本
8. Page Agent的应用场景
   1. SaaS 产品 AI 副驾驶：在自家产品中嵌入助手，直接帮用户执行操作而非仅给出文字指引。
   2. 智能表单填写：将多步 ERP/CRM 表单压缩为一句指令，如“提交昨天午餐 50 元差旅报销”。
   3. 无障碍访问：结合 Web Speech API 实现语音控制网页，提升视障用户操作体验。
   4. 遗留系统现代化：为无 API 的旧系统添加 AI 命令栏，无需改动原始代码。

综上所述，Page Agent 凭借其零后端改造、低成本运行和原生安全继承等特性，为 Web 应用快速集成 AI 操作能力提供了一条高效路径。无论是为 SaaS 产品添加智能助手、简化复杂表单填写，还是提升无障碍访问体验，它都能通过自然语言指令直接操控页面元素，让开发者与用户都从中受益。