阿里巴巴发布Page Agent实现浏览器内嵌式AI自然语言网页操作

核心概念

Page Agent 是阿里巴巴推出的客户端 JavaScript 库，旨在让 Web 应用直接拥有自然语言交互能力。它以 DOM Dehydration 为核心，将页面的交互节点压缩为一棵 FlatDomTree 文本树，仅将结构化文本发送给大模型，从而大幅降低带宽和计算成本。

工作原理

DOM 读取与脱水：在用户下达指令后，Page Agent 扫描当前页面的 DOM，识别按钮、链接、输入框等交互元素，为每个元素分配唯一索引、角色与标签。
文本映射：将这些信息组织成平面文本树，去除冗余标记，只保留模型需要的结构化信息。
模型推理：调用任意 OpenAI‑compatible 接口（如 OpenAI、通义千问、文心一言等），使用 LLM 解析自然语言指令并生成对应的操作序列（如 clickElement(12)、inputText(7, "2026-07-02")）。
执行与反馈：PageAgent 通过内部的 PageController 完成真实点击、滚动、文本输入等动作，并可在 UI 面板中实时展示 Action trace 与 Dehydrated DOM。

与传统自动化工具的对比

维度	Page Agent	Selenium / Playwright / Puppeteer	browser‑use (外部进程)
运行位置	页面内部的 JS	浏览器外部驱动进程	外部进程 + 可选视觉模型
输入方式	文本化 DOM	截图或 CDP 协议	文本+视觉
对模型要求	纯文本 LLM 即可	可配合视觉模型	需要多模态模型
适用场景	自有业务内部页面	跨站爬虫、回归测试	多站点自动化
安全控制	前端 Prompt + 服务器验证	依赖后端脚本安全	取决于外部实现

典型应用场景

SaaS AI Copilot：在内部管理系统中嵌入指令栏，用户一句话即可完成报销、工单等多步操作。
智能表单填写：将复杂的 ERP/CRM 表单压缩为自然语言指令，如“提交昨天午餐的 50 元差旅费用”。
无障碍访问：结合 Web Speech API，实现语音控制，提升残障用户的网页可达性。
遗留系统现代化：为没有 API 的内部工具添加“一键指令”，无需改动原有代码。

快速上手示例

import { PageAgent } from 'page-agent'
const agent = new PageAgent({
  model: 'qwen3.5-plus',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  apiKey: 'YOUR_API_KEY',
  language: 'zh-CN'
})
await agent.execute('点击登录按钮')

上述代码仅需几行即可在任意网页中激活 AI 助手。生产环境建议通过后端代理转发 API 请求，以防 API Key 泄露。

限制与最佳实践

单页范围：核心库默认只操作当前视图，跨标签页需额外 Chrome 扩展或 MCP 服务器。
安全性：Prompt‑level 安全可防止误操作，但对高危动作（如支付）仍需服务器端二次校验。
模型成本：仅传输文本，可显著降低使用 GPT‑4 等高价模型的费用。

结语

Page Agent 把 AI 交互从后端搬到前端，提供了一个低成本、易集成的浏览器内嵌式智能体方案。对拥有自主业务页面的企业而言，它能够快速交付具备自然语言操作能力的 Copilot，缩短研发周期并提升用户体验。未来若能完善跨页协作与更细粒度的安全策略，Page Agent 有望在企业内部自动化领域形成新的标准。