Page Agent 是什么？带你了解阿里开源的自然语言操控工具

最近，阿里开源了一款轻量级的前端智能体库——Page Agent，引起了广泛关注。简单来说，它是一个能“听懂”人类语言、纯前端运行的AI助手。你只需要在网页中嵌入一行代码，用户就能用自然语言直接控制页面上的各种元素，比如点击按钮、填写表单、滚动页面。其核心技术是“DOM脱水”，它能把复杂的页面结构压缩成一段精简的文本树，再交给大模型去理解。只要你的模型接口兼容OpenAI，就能快速接入；整个过程完全不需要后端服务、截图功能，甚至无需安装浏览器扩展。对于想给自己的Web应用快速添加一个“AI副驾驶”功能的团队来说，这确实是一个高效、实用的轻量级方案。

Page Agent 的核心功能一览

它的核心能力可以归纳为以下几个方面：

• 自然语言操控页面：用户只需说“点击登录按钮”或“帮我填一下表单”，AI就能自动定位到对应的DOM元素并执行相应操作。
• DOM脱水压缩：将页面的结构信息压缩成FlatDomTree文本树，只保留交互相关的元素，从而显著降低模型调用的Token消耗。
• 模型无关架构：支持任何兼容OpenAI接口的模型，如通义千问、GPT等，只需配置baseURL和API Key即可轻松切换。
• 内置安全控制：支持设置操作白名单、对敏感字段进行数据脱敏，关键操作需要人工确认，还能注入自定义的业务知识。
• 单页交互闭环：所有操作——点击、输入、滚动——都在当前页面内部完成，无需后端或浏览器扩展配合。

Page Agent 的技术原理深度解析

这项技术的实现逻辑并不复杂。你可以把它理解为一个“翻译官”——它能将复杂的网页结构，翻译成大语言模型易于理解的“小抄”。

• DOM脱水：本质上，它会扫描整个页面的DOM树，为每个交互元素分配唯一索引，标注其角色和标签，然后去除冗余的样式、布局信息，生成一个紧凑的文本表示。这一步直接决定了模型的理解效率。
• PageController架构：这是一个核心控制器，负责两件事：一是维护更新后的DOM树状态，二是执行具体的原子操作，例如点击某个元素、向输入框填充文本、滚动页面。
• Monorepo分包设计：项目被拆分成三个包：@page-agent/core 负责智能体的底层逻辑，page-agent 提供完整的UI操作面板，@page-agent/page-controller 处理DOM的提取与索引。这种设计便于后续按需引入和独立升级。
• 客户端沙箱运行：所有代码都直接在用户的浏览器进程中执行，天然继承了当前页面的Cookie、Session和认证状态，省去了手动配置登录流程的繁琐步骤。

如何快速上手 Page Agent

实际接入的流程非常直观，几步就能完成：

• 快速体验：想先试试效果？在页面中加入一行