PageAgent：嵌入网页的 GUI 智能体，用自然语言控制 Web 界面

项目概述

PageAgent 是阿里巴巴开源的一个创新项目，它被称为"生活在你的网页中的 GUI 智能体"。这个项目允许开发者通过自然语言来控制 Web 界面，无需浏览器扩展、Python 环境或无头浏览器，一切都发生在网页内部的 JavaScript 环境中。

核心特性

• 🎯 易于集成：无需浏览器扩展/Python/无头浏览器，仅需页内 JavaScript
• 📖 基于文本的 DOM 操作：不需要截图、多模态 LLM 或特殊权限
• 🧠 自带 LLM：支持自定义大语言模型配置
• 🎨 精美 UI：带有人类在环路的交互式界面
• 🐙 可选 Chrome 扩展：支持多页面任务处理

技术架构

设计理念

PageAgent 的设计哲学是客户端 Web 增强，而非服务器端自动化。它基于优秀的 browser-use 项目进行构建，继承了其在 Web 自动化和 DOM 交互模式方面的最佳实践。

技术特点

1. 纯前端实现：所有逻辑都在浏览器中运行，不需要后端服务
2. 文本化 DOM 操作：通过分析 DOM 结构而非屏幕截图来理解页面
3. LLM 驱动：利用大语言模型理解自然语言指令并转化为 DOM 操作
4. 零权限要求：不需要特殊的浏览器权限或扩展

快速开始

一行代码集成

最快的体验方式是使用官方提供的演示 CDN（使用免费的测试 LLM API）：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/page-agent.demo.js" crossorigin="true"></script>

⚠️ 注意：此演示 CDN 仅用于技术评估，使用时需同意其条款。

国内镜像

为了获得更好的访问速度，可以使用国内镜像：

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

NPM 安装

对于生产环境，建议通过 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: 'YOUR_API_KEY',
    language: 'en-US',
})

await agent.execute('点击登录按钮')

应用场景

1. SaaS AI 助手

在你的产品中快速集成 AI 助手功能，无需重写后端架构。只需几行代码，就能让用户通过自然语言与你的 SaaS 应用交互。

示例场景：

• 用户说"帮我创建一个新的项目"，自动填写表单并提交
• 用户说"显示上周的数据报告"，自动导航到报表页面并筛选时间范围

2. 智能表单填充

将需要多次点击的复杂工作流程简化为一句话。特别适合 ERP、CRM 和管理系统。

示例场景：

• 自动填写复杂的采购申请表单
• 批量更新客户信息
• 自动化数据录入任务

3. 无障碍访问

通过自然语言让任何 Web 应用对残障人士更加友好。支持语音命令、屏幕阅读器，实现零障碍交互。

示例场景：

• 视障用户通过语音命令操作网页
• 行动不便用户通过简单指令完成复杂操作

4. 跨页面智能体

通过可选的 Chrome 扩展，让你的智能体能够跨浏览器标签页工作，实现更复杂的自动化任务。

示例场景：

• 从一个页面抓取数据并填充到另一个页面
• 跨多个系统协调工作流程
• 自动化需要多步骤的业务流程

技术深度解析

DOM 操作机制

PageAgent 不需要截图或使用多模态模型，它通过以下方式理解页面：

1. DOM 树分析：解析页面的 DOM 结构，提取可交互元素
2. 元素索引：为每个可操作元素分配唯一标识
3. 文本化描述：将页面结构转化为 LLM 可理解的文本格式
4. 指令映射：将自然语言指令映射到具体的 DOM 操作

LLM 集成

PageAgent 支持自定义 LLM 配置，这意味着：

• 可以使用阿里云通义千问（DashScope）
• 可以部署自己的 LLM 服务
• 可以根据需求选择不同的模型
• 完全控制 API 调用和成本

安全考虑

由于所有操作都在客户端进行，PageAgent 具有以下安全特性：

• 无服务器依赖：不依赖外部服务器处理敏感数据
• 用户可控：所有操作都在用户浏览器中执行
• 透明化：用户可以清楚看到每一步操作

与其他方案的对比

特性	PageAgent	传统 RPA	浏览器扩展	服务端自动化
部署难度	极低（一行代码）	高	中	高
用户权限	无需特殊权限	需要	需要扩展权限	需要服务器
跨平台	✅ 所有现代浏览器	❌ 通常限平台	❌ 限特定浏览器	✅ 服务端
维护成本	低	高	中	高
用户体验	原生集成	独立应用	扩展图标	不可见

实际案例

案例 1：电商后台管理系统

场景：客服需要处理大量订单，每个订单需要在系统中进行多次点击和表单填写。

解决方案：

// 集成 PageAgent 后，客服只需说：
"把订单#12345 的状态改为已发货，并发送通知邮件"

// PageAgent 自动执行：
// 1. 搜索订单#12345
// 2. 点击进入详情页
// 3. 点击"发货"按钮
// 4. 填写物流信息
// 5. 点击"发送通知"

效果：原本需要 5-6 次点击的操作，现在一句话完成。

案例 2：数据分析平台

场景：业务人员需要定期从多个维度查看数据报表。

解决方案：

// 业务人员说：
"显示上个月华东地区的销售数据，按产品类别排序"

// PageAgent 自动：
// 1. 导航到报表页面
// 2. 选择时间范围为"上个月"
// 3. 筛选地区为"华东"
// 4. 设置排序为"按产品类别"

贡献与社区

PageAgent 是一个开源项目，欢迎社区贡献。项目遵循以下原则：

• 接受人类贡献，不接受完全由机器人/AI 生成的 PR
• 遵循 CONTRIBUTING.md 中的指南
• 遵守行为准则

许可证

• 开源协议：MIT License
• 版权信息：Copyright © Alibaba
• 衍生项目：基于 browser-use 项目构建（MIT License）

总结

PageAgent 代表了一种新的 Web 交互范式：将 AI 智能体直接嵌入到网页中，让用户能够用最自然的方式——语言——来操作界面。对于开发者来说，这意味着：

1. 极低的集成成本：一行代码即可启用 AI 交互能力
2. 灵活的应用场景：从简单的表单填充到复杂的跨页面工作流
3. 完全的控制权：可以选择自己的 LLM，控制成本和性能
4. 更好的用户体验：为用户提供更智能、更便捷的交互方式

随着大语言模型的普及和成熟，像 PageAgent 这样的工具将会成为 Web 应用的标准配置，让人机交互变得更加自然和高效。

相关链接

• 项目仓库：https://github.com/alibaba/page-agent
• 在线演示：🚀 Demo
• 官方文档：📖 Documentation
• browser-use 项目：https://github.com/browser-use/browser-use

---

本文基于 PageAgent 项目官方文档编写，项目信息截至 2026 年 3 月 14 日。