Awesome AI Pedia

Appearance

page-agent ​

Page Agent 是阿里巴巴开源的一个 纯 JavaScript 的网页内 GUI Agent，核心目标是：让网页应用直接在页面里获得“自然语言操作界面”的能力。

它最值得注意的点在于，它不是传统意义上的浏览器自动化脚本，也不是依赖截图识别的多模态 Agent，而是把 Agent 运行在当前网页上下文中，通过 DOM 文本信息 + 页面内交互 来完成操作。

一句话理解：

Page Agent = 把“用自然语言操作网页”这件事，直接嵌进你的 Web 应用。

它是什么？ ​

根据官方仓库说明，Page Agent 是一个 “living in your webpage” 的 GUI Agent。它强调几个方向：

  • 运行在网页内
  • 不依赖 Python / 无头浏览器 / 浏览器扩展才能工作
  • 主要基于文本化 DOM 信息进行操作，而不是靠截图点击
  • 支持接入你自己的 LLM
  • 提供 human-in-the-loop 的交互界面
  • 可选 Chrome 扩展，用于跨页面、多标签任务

这意味着它更像是一个 面向产品集成的前端 Agent SDK，而不是一个只给测试工程师使用的自动化框架。

它解决什么问题？ ​

很多 Web 系统已经有很强的业务能力，但交互成本很高，尤其是：

  • ERP / CRM / OA / 管理后台的长流程操作
  • 大量表单录入、筛选、检索、批量点击
  • 面向非技术用户的复杂 SaaS 系统
  • 需要自然语言辅助操作的无障碍场景

Page Agent 的价值在于，它允许用户直接说：

  • “帮我点开订单管理，并筛选今天未付款的客户”
  • “把这个表单按公司信息自动填完”
  • “打开登录页并点击提交”

然后由页面内 Agent 去理解当前 DOM、生成步骤并执行。

核心特点 ​

1. 纯前端集成 ​

官方强调它可以直接通过前端脚本接入。你不需要先搭一个 Selenium / Playwright / Puppeteer 服务，也不需要额外启动 Python Agent 环境。

这对产品接入非常关键，因为它意味着：

  • 接入门槛低
  • 改造成本小
  • 更适合嵌入现有 Web 产品

2. 基于文本的 DOM 操作 ​

Page Agent 的一个重要设计点是：

  • 不以截图为主
  • 不强依赖多模态模型
  • 不需要特殊浏览器权限

相比依赖视觉定位的 Agent，这类方案通常：

  • 更轻量
  • 更容易控制成本
  • 在结构化网页场景中更稳定

3. Bring Your Own LLM ​

你可以接入自己的模型服务。官方示例使用的是 OpenAI 兼容风格的接口参数，包括：

  • model
  • baseURL
  • apiKey
  • language

这意味着它并不绑定某一个特定模型厂商，更适合企业内部接入已有的推理服务。

4. 面向真实产品，而不是只面向测试 ​

Page Agent 的定位不是单纯做自动化测试，而是更偏向：

  • 产品内 AI Copilot
  • 智能操作助手
  • 自然语言表单助手
  • 无障碍交互入口

这和 Playwright / Selenium 的出发点不太一样。

5. 可扩展到跨页面任务 ​

官方提供了 可选的 Chrome 扩展，用于处理多页面、多标签页任务。
如果你只在单页应用或当前页面内工作，纯页面内方案就够了；如果要跨标签页协同，就可以配合扩展能力使用。

适用场景 ​

官方 README 中给出的典型场景包括：

  • SaaS AI Copilot
    几行代码就能给你的产品增加一个网页操作型 Copilot。

  • 智能表单填写
    把原本要十几二十次点击和输入的操作压缩成一句自然语言。

  • 无障碍增强
    让用户通过自然语言、语音命令等方式访问复杂 Web 应用。

  • 跨页面 Agent
    结合 Chrome 扩展，把能力延伸到多个标签页。

和传统网页自动化的区别 ​

如果把它和 Playwright、Puppeteer、Selenium 这类工具放在一起看，差异大致是：

  • 传统自动化工具 更偏工程控制和测试脚本
  • Page Agent 更偏产品内嵌式自然语言操作层

你可以把它理解为：

  • Playwright 解决的是 “开发者如何精确编写自动化脚本”
  • Page Agent 解决的是 “最终用户如何直接用自然语言操作页面”

所以它更适合：

  • 面向终端用户的 AI 功能
  • SaaS 内嵌 Copilot
  • 智能后台助手

而不是单纯替代测试框架。

快速开始 ​

方式一：NPM 安装 ​

bash
npm install page-agent
javascript
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('点击登录按钮')

从这个示例可以看出，它的使用方式很直接：

  1. 初始化 PageAgent
  2. 配置模型与 API
  3. 调用 execute() 传入自然语言任务

方式二：脚本快速集成 ​

官方 README 还提供了基于 CDN 的页面脚本接入方式，用于快速体验。
这种方式更适合 Demo、验证和原型开发；生产接入更适合直接走 NPM。

优势总结 ​

  • 接入成本低：适合直接嵌入现有 Web 应用
  • 不依赖视觉模型：很多结构化页面场景更轻量
  • 更像产品能力，而不是测试脚本
  • 支持自定义模型接入
  • 可以扩展到跨页面任务

使用时要注意 ​

  • 它的强项是 客户端网页增强，官方明确说明：不是服务端自动化工具。
  • 如果你的目标是大规模爬虫、后端批处理浏览器自动化、CI 测试流水线，Playwright / Puppeteer 往往还是更直接。
  • 如果页面结构极其动态、DOM 语义很差、组件层层嵌套又缺少可读文本，那么 Agent 的理解效果也会受到页面质量影响。

换句话说，Page Agent 更依赖“网页本身是否具备良好的可理解结构”。

适合谁 ​

  • 想给自己产品增加 AI 网页操作能力的前端/全栈团队
  • 做企业后台、SaaS、CRM、ERP 的产品团队
  • 想做“自然语言操控网页”的 AI Copilot 团队
  • 想做 Web 无障碍增强入口的开发者

如果你的需求是：

  • “让用户直接在网页里说一句话完成操作”
  • “给现有系统加一个 AI 助手，而不是重写整个后端”

那么 Page Agent 是一个非常值得关注的方向。

项目地址 ​

一句话总结 ​

Page Agent 的核心价值不是“替代浏览器自动化工具”，而是把“网页可被自然语言直接操控”这件事，做成一个可嵌入产品的前端能力。