AI导哈

AI文章

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

AI导哈整理

Page Agent 是阿里巴巴开源的纯前端 JavaScript 智能体库，通过一行代码嵌入网页，可让用户用自然语言操控页面 DOM 元素。

Page Agent是什么

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

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 和认证状态，无需额外后端。
挖挖GitHub

微信关注回复“开源”，加入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 的旧系统添加自然语言命令栏，无需改动原始代码。