project
Page Agent - 阿里开源的 JavaScript GUI 智能体库
Page Agent 是阿里巴巴开源的纯前端 JavaScript 智能体库，通过一行代码嵌入网页，可让用户用自然语言操控页面 DOM 元素。
Page Agent是什么
Page Agent 是阿里巴巴开源的纯前端 JavaScript 智能体库，通过一行代码嵌入网页，可让用户用自然语言操控页面 DOM 元素。客户端库采用DOM 脱水技术将复杂页面压缩为精简文本树，支持任何 OpenAI 兼容模型，无需后端、截图或浏览器扩展，即可实现点击、填表、滚动等交互，适合为自有 Web 应用快速添加 AI 副驾驶功能。
Page Agent的主要功能
- 自然语言操控页面：用户输入点击登录按钮、填写表单等指令，AI 自动定位并执行 DOM 操作
- DOM 脱水压缩：将复杂页面结构压缩为 FlatDomTree 文本树，仅提取交互元素，降低模型输入成本
- 模型无关架构：支持任何 OpenAI 兼容端点（如通义千问、GPT 等），只需配置 baseURL 和 API Key
- 内置安全控制：支持操作白名单、敏感字段数据脱敏、关键操作人工确认，以及自定义领域知识注入
- 单页交互闭环：在单个页面内完成点击、输入、滚动等操作，无需后端服务或浏览器扩展
Page Agent的技术原理
- DOM 脱水（DOM Dehydration）：扫描页面 DOM，为每个交互元素分配索引、角色和标签，剥离冗余标记，生成紧凑文本表示供模型理解。
- PageController 架构：核心控制器负责更新 DOM 树、执行元素点击、文本输入、页面滚动等原子操作。
- Monorepo 分包设计：
@page-agent/core负责无头智能体逻辑，page-agent提供完整 UI 面板，@page-agent/page-controller处理 DOM 提取与索引。 - 客户端沙箱运行：直接运行在用户浏览器会话中，继承 Cookie、Session 和认证状态，无需额外后端。
微信关注回复“开源”，加入AI开源项目交流群
如何使用Page Agent
- 快速体验：在网页中插入一行
<script>标签引入 Page Agent 的 IIFE 演示脚本，即可在页面上激活 AI 操控面板。 - 安装依赖：生产环境通过
npm install page-agent安装依赖包，将其引入到你的前端项目中。 - 创建实例：用
new PageAgent()创建实例，配置 model、baseURL、apiKey 等参数指向你的 OpenAI 兼容模型端点。 - 执行指令：调用
agent.execute('你的自然语言指令')让 AI 解析指令并自动在页面 DOM 中定位元素、执行点击或输入等操作。 - 安全配置：可选配置操作白名单、数据脱敏规则和关键操作确认，确保 AI 行为符合安全与业务要求。
Page Agent的核心优势
- 零后端改造：嵌入一行脚本即可，无需重写后端或分发浏览器扩展。
- 低成本运行：仅传输文本 DOM 结构，无需多模态视觉模型，显著降低 Token 消耗。
- 原生安全继承：页面原有的 UI 校验、权限规则继续生效，敏感数据可脱敏。
- 模型无关：支持任何 OpenAI 兼容端点，切换模型仅需改 baseURL。
- MIT 开源：TypeScript 编写，代码完全开放，可自由定制。
Page Agent的项目地址
- 项目官网：https://alibaba.github.io/page-agent/
- GitHub仓库：https://github.com/alibaba/page-agent
Page Agent的同类竞品对比
| 维度 | Page Agent | Playwright |
|---|---|---|
| 运行位置 | 页面内部（客户端 JavaScript） | 外部进程（Node.js/Python/.NET） |
| 页面读取 | 脱水文本 DOM（FlatDomTree） | CDP 协议直接访问浏览器 DOM |
| 交互方式 | 自然语言指令驱动 | 代码脚本精确控制 |
| 模型依赖 | 需 LLM 解析指令 | 无需 AI 模型，纯规则执行 |
| 部署方式 | 嵌入一行 <script> 或 npm 安装 |
安装浏览器驱动 + 运行时环境 |
| 认证状态 | 自动继承用户浏览器 Cookie/Session | 需手动配置上下文或登录流程 |
| 视觉能力 | 无，纯文本 DOM | 支持截图、视觉比对、录屏 |
| 跨页能力 | 单页为主，跨标签需 Chrome 扩展 | 原生支持多标签、多窗口、多浏览器 |
| 适用场景 | 为已有 Web 应用添加 AI 副驾驶 | 端到端自动化测试、跨站爬虫 |
| 学习成本 | 低，用户自然语言即可 | 中，需编写选择器和脚本 |
Page Agent的应用场景
- SaaS 产品 AI 副驾驶：在自家产品中嵌入助手，直接帮用户执行操作而非仅给出文字指引。
- 智能表单填写：将多步 ERP/CRM 表单压缩为一句指令，如”提交昨天午餐 50 元差旅报销”。
- 无障碍访问：结合 Web Speech API 实现语音控制网页，提升视障用户操作体验。
- 遗留系统现代化：为无 API 的旧系统添加自然语言命令栏，无需改动原始代码。