Page Agent

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

Page Agent：赋能网页交互的纯前端 JavaScript 智能体

Page Agent，阿里巴巴开源的一款性的纯前端 JavaScript 智能体库，以其一行代码即可嵌入网页的便捷性，让用户能够通过自然语言轻松驾驭页面上的 DOM 元素，实现前所未有的交互体验。

Page Agent 揭秘

Page Agent 是一款创新性的纯前端 JavaScript 智能体库，其核心亮点在于只需一行代码即可集成到现有网页中，赋予用户使用自然语言操控页面 DOM 元素的能力。该客户端库运用先进的 DOM 脱水技术，能将复杂的页面结构精炼成高效的文本树。它兼容任何 OpenAI 兼容模型，无需后端支持、屏幕截图或浏览器扩展，即可实现点击、填表、滚动等一系列交互操作。这使得为自有 Web 应用快速集成 AI 副驾驶功能变得轻而易举。

Page Agent 的核心能力

• 自然语言驱动的页面操控：用户只需输入诸如“点击登录按钮”或“填写表单”等自然语言指令，AI 即可自动精准定位并执行相应的 DOM 操作。
• 高效的 DOM 脱水与压缩：通过将复杂页面结构转化为精简的 FlatDomTree 文本树，Page Agent 仅提取必要的交互元素，极大地降低了模型的输入成本。
• 模型无关的灵活架构：该库支持所有 OpenAI 兼容的端点（包括通义千问、GPT 等），用户只需简单配置 baseURL 和 API Key 即可实现模型切换。
• 内置的安全防护机制：Page Agent 提供操作白名单、敏感字段数据脱敏、关键操作人工确认以及自定义领域知识注入等功能，确保 AI 操作的安全性与合规性。
• 单页交互的完整闭环：在单个页面内，Page Agent 即可完成点击、输入、滚动等操作，无需依赖外部后端服务或浏览器插件。

Page Agent 的技术基石

• DOM 脱水（DOM Dehydration）：该技术通过扫描页面 DOM，为每个可交互元素赋予唯一的索引、角色和标签，并移除冗余标记，生成紧凑的文本表示，便于 AI 模型理解。
• PageController 架构：作为核心控制器，它负责管理 DOM 树的更新，并执行点击、文本输入、页面滚动等基础原子操作。
• Monorepo 的模块化设计：项目采用 Monorepo 架构，将核心无头智能体逻辑封装在 @page-agent/core 中，提供完整 UI 面板的 page-agent 包，以及负责 DOM 提取与索引的 @page-agent/page-controller。
• 客户端沙箱运行环境：Page Agent 直接在用户浏览器会话中运行，自动继承 Cookie、Session 和认证状态，无需额外的后端配置。

欲加入 AI 开源项目交流群，请关注微信并回复“开源”。

Page Agent 的使用指南

• 即刻体验：只需在网页中添加一行 <script> 标签，引入 Page Agent 的 IIFE 演示脚本，即可在页面上激活 AI 操控面板，进行快速体验。
• 生产环境集成：在生产环境中，可通过 npm install page-agent 命令安装依赖包，并将其集成到您的前端项目中。
• 创建智能体实例：使用 new PageAgent() 创建实例，并根据您的 OpenAI 兼容模型端点，配置 model、baseURL、apiKey 等参数。
• 执行自然语言指令：通过调用 agent.execute('您的自然语言指令') 方法，让 AI 解析指令，并在页面 DOM 中自动定位元素并执行相应的操作。
• 定制安全策略：您可以根据业务需求，灵活配置操作白名单、数据脱敏规则以及关键操作确认机制，确保 AI 的行为符合安全与业务规范。

Page Agent 的突出优势

• 无需后端改造：仅需嵌入一行脚本，即可实现 AI 功能，无需修改后端代码或分发浏览器扩展。
• 低成本高效运行：通过传输精简的文本 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 的应用场景展望

• SaaS 产品智能化升级：将 Page Agent 集成到自有产品中，为用户提供直观的 AI 操作助手，而非仅仅是文字指导。
• 便捷的智能表单填写：通过一句自然语言指令，即可完成复杂的 ERP/CRM 表单填写，例如“提交昨天午餐 50 元差旅报销”。
• 提升无障碍访问体验：结合 Web Speech API，实现语音控制网页，显著改善视障用户的操作体验。
• 遗留系统的现代化改造：为缺乏 API 的旧系统添加自然语言命令栏，实现现代化交互，无需改动原始代码。