Page-Agent 实测：阿里开源纯前端 GUI Agent，一行代码让网站变身 AI 原生应用

给一个 SaaS 产品加「AI Copilot」有多麻烦？传统方案基本两条路：要么重写后端做一套 Agent 编排逻辑，要么装个浏览器扩展或 headless 浏览器在外部控制页面。两条路都不轻量。

阿里巴巴开源的 Page-Agent（GitHub 18.7K Star，MIT 协议）给出了第三条路：一个纯页内的 JavaScript GUI Agent，住在你的网页里，用自然语言操作界面。

不需要浏览器扩展、不需要 Python、不需要无头浏览器——一段 <script> 引入，页面就能听懂自然语言指令。

Page-Agent 是什么

Page-Agent 是阿里巴巴开源的纯前端 GUI Agent，用 TypeScript 编写，运行在浏览器页面内部的 JavaScript 运行时中。它通过读取页面 DOM 的文本描述来理解界面结构，然后由 LLM 决策执行什么操作（点击、填写、滚动等），最终翻译为实际的 DOM 操作。

核心定位非常明确：客户端 Web 增强（Client-side Web Enhancement），不是服务端自动化工具。它的目标用户是产品开发者——让你用几行代码给自己的 SaaS 产品、ERP/CRM 系统、管理后台加上 AI 操作能力。

与传统浏览器自动化的本质区别

市面上多数网页自动化方案走「外部控制」路线——启动一个浏览器进程，通过 CDP 协议操作页面。Page-Agent 完全反过来：它跑在页面自己的 JS 运行时里，跟你的业务代码同进程。

维度	Page-Agent	Playwright / Browser Use	Selenium
运行位置	页面内 JS，同进程	外部进程控制浏览器	外部进程 + WebDriver
依赖	一个 <script> 标签	Python + 浏览器二进制	Java/Python + 驱动
用户安装	零安装，网页自带	需装扩展或 Agent 客户端	需配置驱动
感知方式	文本 DOM（无截图）	截图 + 多模态 LLM / DOM	DOM via WebDriver
模型要求	文本模型即可	多模态或文本	无需 LLM
适合场景	产品内 AI Copilot	跨站自动化 / RPA	E2E 测试
定位	客户端 Web 增强	服务端自动化	测试框架

一句话总结：Playwright 是 QA 和数据团队用的工具，Page-Agent 是产品开发者嵌进自己产品的能力。你不会用 Page-Agent 做回归测试，但你会用它让 ERP 系统的用户一句话填完一张复杂表单。

核心技术架构：DOM 脱水（DOM Dehydration）

Page-Agent 最聪明的设计决策是不截图。多数 GUI Agent 靠「截图 + 多模态 LLM 看图操作」，但这套方案在页内纯 JS 环境根本玩不转——截图要走 GPU 渲染、图像 token 成本高、延迟大、还要特殊权限。

Page-Agent 采用了一种叫**「DOM 脱水」（DOM Dehydration）**的技术：

1. 扫描 DOM：遍历页面的 Document Object Model，识别所有可交互元素（按钮、链接、输入框等）
2. 元素索引：为每个可交互元素分配一个索引号，附带角色（role）和标签（label）
3. 生成 FlatDomTree：将活体 DOM 转换为紧凑的文本树结构，去除冗余标记
4. LLM 决策：文本 LLM 读取这个紧凑表示，输出操作指令（如「点击索引 5 的按钮」）
5. 执行操作：Agent 将指令翻译为实际的 DOM 操作

用户指令: "点击登录按钮"
    ↓
DOM 脱水 → FlatDomTree: "[5] button '登录' [6] input '邮箱' ..."
    ↓
LLM 推理 → Action: click(5)
    ↓
PageController → clickElement(5) ✅

这套设计的好处：

• 不依赖多模态模型（普通文本 LLM 就行，成本低）
• 不需要截图权限
• 延迟低、token 消耗少
• 不依赖 GPU 渲染

代价：纯文本描述会丢失部分视觉信息（如靠颜色/位置传达的状态），但 Page-Agent 的 DOM 序列化做得比较细，元素的角色、文字、可见性都包含在内。

一行代码集成

最快体验（免费测试 LLM）

<script
    src="https://cdn.jsdelivr.net/npm/page-agent@1.12.2/dist/iife/page-agent.demo.js"
    crossorigin="anonymous"
></script>

⚠️ 仅供技术评估。Demo CDN 使用阿里巴巴提供的免费测试 LLM API，数据会经过其服务器。生产环境必须接自己的 API Key。

国内镜像加速：

<script
    src="https://registry.npmmirror.com/page-agent/1.12.2/files/dist/iife/page-agent.demo.js"
    crossorigin="anonymous"
></script>

NPM 安装（生产推荐）

npm install page-agent

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
    model: 'qwen3.5-plus',
    baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
    apiKey: ***
    language: 'zh-CN',
})

// 执行自然语言指令
await agent.execute('点击登录按钮')
await agent.execute('在搜索框输入"AI 工具"并按回车')
await agent.execute('把表单中的日期选择为下周一')

配置参数说明

参数	说明	示例值
model	模型名称	qwen3.5-plus, gpt-4o, claude-3-5-sonnet
baseURL	OpenAI 兼容 API 端点	https://api.openai.com/v1
apiKey	API 密钥	你的 LLM 服务密钥
language	界面语言	zh-CN, en-US, ja-JP

安全控制

Page-Agent 提供了三重安全机制：

• 操作白名单（Allowlist）：限制 Agent 可执行的操作类型，比如禁止删除操作
• 数据脱敏（Data Masking）：隐藏密码等敏感字段，不让 LLM 看到
• 自定义知识注入：让 Agent 遵循你的业务规则，比如「金额超过 10 万需要二次确认」

与主流 GUI Agent 方案全面对比

维度	Page-Agent	Browser Use	UI-TARS	Playwright MCP
开发者	阿里巴巴	社区开源	字节跳动	Microsoft
运行位置	页面内 JS	外部 Python 进程	外部进程	外部 Node 进程
依赖	<script> 标签	Python + 浏览器	Python + 模型	Node.js + 浏览器
感知方式	文本 DOM	DOM + 可选截图	截图 + 多模态	DOM via CDP
模型要求	文本模型	文本或多模态	专用视觉模型	文本模型
跨页面	需 Chrome 扩展	原生支持	原生支持	原生支持
集成难度	⭐ 极低	⭐⭐⭐ 中等	⭐⭐⭐⭐ 较高	⭐⭐⭐ 中等
核心场景	产品内 Copilot	通用自动化	视觉复杂任务	Agent 浏览器控制
协议	MIT	MIT	自定义	MIT

选型建议：

• 给产品加 AI 能力 → Page-Agent（零安装，用户无感知）
• 跨站自动化/RPA → Browser Use（Python 生态，灵活）
• 视觉复杂任务 → UI-TARS（截图理解，但需要专用模型）
• 让 AI Agent 控制浏览器 → Playwright MCP（MCP 协议标准化）

实战教程：五大使用场景

场景 1：SaaS 产品 AI Copilot

为你的 SaaS 产品添加 AI 助手，让用户用自然语言操作：

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
    model: 'qwen3.5-plus',
    baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
    apiKey: ***
    language: 'zh-CN',
})

// 用户输入："导出上周的销售数据为 Excel"
await agent.execute('导出上周的销售数据为 Excel')
// Agent 自动：找到导出按钮 → 选择时间范围 → 选择格式 → 点击确认

场景 2：ERP/CRM 智能表单填写

把 20 次点击变成一句话。对复杂的后台表单特别实用：

// 用户输入："按上次的模板填写客户信息"
await agent.execute('按上次的模板填写客户信息')
// Agent 自动：识别表单字段 → 填充数据 → 验证格式 → 提交

场景 3：无障碍增强

配合语音识别，让视障用户用语音操作网页：

// 语音识别 → 文本 → Page-Agent 执行
const command = await voiceRecognition()
await agent.execute(command)

场景 4：Chrome 扩展（跨页面任务）

安装官方 Chrome 扩展后，Agent 能跨标签页工作：

// 在 A 系统查订单，到 B 系统建工单
await agent.execute('在当前页面查找订单号 12345 的客户信息')
await agent.execute('切换到 CRM 系统，为该客户创建跟进记录')

场景 5：MCP Server（被外部 Agent 调用）

将 Page-Agent 暴露为 MCP 工具，让 Claude Desktop、Cursor 等 AI 客户端控制浏览器：

{
  "mcpServers": {
    "page-agent": {
      "command": "npx",
      "args": ["-y", "@page-agent/mcp-server"]
    }
  }
}

企业级应用场景

Page-Agent 在企业内部系统中有广泛的落地空间：

ERP 系统自动化

• 复杂表单批量填写（采购单、销售单、入库单）
• 报表自动生成与导出
• 跨模块数据搬运（从采购模块到财务模块）

CRM 系统增强

• 客户信息快速录入（从名片到系统只需一句话）
• 跟进记录自动填写
• 销售数据导出分析

管理后台优化

• 配置项快速修改（「把所有用户的邮件通知打开」）
• 批量操作执行（「选中本月所有未处理工单，标记为已解决」）
• 数据查询与导出

内部工具智能化

• OA 系统请假/报销（「帮我请下周一到周三的年假」）
• IT 工单自动提交
• 知识库快速检索

局限性与注意事项

1. 单页限制

页内 JS 只能操作当前页面。跨页面任务需要安装 Chrome 扩展。

2. 视觉信息丢失

纯文本 DOM 描述会丢失颜色、位置、动画等视觉信息。对高度依赖视觉的页面（Canvas/WebGL/数据可视化大屏）效果有限。

3. 安全性考量

• Agent 继承用户的登录状态和权限——它能做的，用户自己也能做
• 敏感操作（删除、转账等）仍需要后端二次验证
• 不要在前端暴露 API Key——生产环境应通过后端代理转发 LLM 请求

4. 性能影响

• DOM 脱水有计算开销，超大页面（数千节点）可能卡顿
• 每次操作需要调用 LLM，有网络延迟（通常 1-3 秒）
• 建议使用轻量文本模型（如 Qwen3.5-Plus）降低成本

5. 浏览器兼容性

• 需要现代浏览器（Chrome 90+, Firefox 88+, Safari 14+, Edge 90+）
• 不支持 IE（IE 已退役，这不算问题）

总结评价

优点

✅ 零安装集成：一行 <script> 标签，用户无感知 ✅ 轻量高效：纯文本 DOM，无需多模态模型，成本低 ✅ 模型无关：支持任何 OpenAI 兼容 API，包括本地模型 ✅ 安全可控：操作白名单、数据脱敏、知识注入 ✅ 开源免费：MIT 协议，可商用

缺点

❌ 单页限制：跨页面需要额外安装 Chrome 扩展 ❌ 视觉信息丢失：不适合 Canvas/WebGL 等视觉密集型页面 ❌ 依赖 LLM：每次操作有网络延迟和 API 成本 ❌ API Key 安全：前端暴露风险，需要后端代理

谁该用，谁别用

该用：

• SaaS 开发者：给产品加 AI Copilot
• 企业 IT：优化内部系统（ERP/CRM/OA）
• 无障碍开发者：让网页对残障用户更友好

别用：

• 测试工程师：用 Playwright 更合适
• 爬虫开发者：用 Puppeteer/Cheerio 更合适
• 跨站自动化：用 Browser Use 更合适

综合评价

Page-Agent 是一个定位精准、设计优雅的开源项目。它不追求做通用自动化框架，而是专注于「给网页加 AI 能力」这一件事。对于 SaaS 厂商来说，这是目前给产品加 AI Copilot 最轻量的方案——一行代码，无需改后端。

GitHub 18.7K Star 的增长速度说明了一切：开发者需要这种「简单到离谱」的集成方式。如果你正在为产品如何接入 AI 能力而头疼，Page-Agent 值得一试。

希望这篇博客文章对您有所帮助！

参考链接：

• GitHub 仓库：alibaba/page-agent
• 官方文档
• 在线 Demo
• MarkTechPost 报道