阿里开源 PageAgent：让 AI 直接'住进'你的网页
不需要浏览器插件，不需要 Python，不需要截图——一行 JS，让你的网页秒变 AI 智能体。
痛点：Web 自动化为什么这么难？
如果你用过 Selenium、Playwright，或者最近流行的 browser-use，一定遇到过这些头疼的问题：
- 环境太重：得装 Python、headless 浏览器、各种依赖，部署复杂，维护成本高；
- 依赖截图 + OCR：很多方案靠多模态模型'看图操作'，慢、贵、还不准；
- 权限门槛高：要控制浏览器，往往需要特殊权限甚至操作系统级别的访问；
- 对现有产品改造成本大：想给自己的 SaaS 产品加个 AI Copilot？对不起，可能要重写后端。
这些问题的根源在于：传统 Web 自动化思路是'从外面控制浏览器'，就像隔着玻璃操作键盘，自然别扭。
阿里巴巴开源的 PageAgent，换了一个思路：让 AI Agent 直接住进网页里面。
PageAgent 是什么？
PageAgent（GitHub: alibaba/page-agent）是一个纯前端的 JavaScript GUI 智能体框架。
它的核心理念用一句话概括：
The GUI Agent Living in Your Webpage（住在你网页里的 GUI 智能体）
它能做什么？
用自然语言控制网页界面。你告诉它'点击登录按钮'、'把表单里的公司名改成阿里巴巴'、'帮我找到最近的订单并导出'，它就真的去做。
它有多轻量？
- ✅ 纯 JavaScript，直接嵌入页面
- ✅ 不需要浏览器扩展（有可选插件用于多 Tab 场景）
- ✅ 不需要 Python / headless 浏览器
- ✅ 不需要截图，不需要 OCR，不需要多模态大模型
- ✅ 不需要特殊权限
它通过直接读取和操作页面 DOM 来理解和控制界面，把清理后的 DOM 结构发给 LLM，由 LLM 决策操作步骤，再由 PageAgent 执行。整个过程全在浏览器里完成。
典型应用场景：
- SaaS AI Copilot：几行代码给你的产品加上 AI 副驾，不用改后端
- 智能表单填写：把原本要点 20 下的操作，变成一句话
- 无障碍访问：让任何 Web 应用都能通过自然语言、语音操控
- ERP / CRM 系统提效：这类系统交互复杂，PageAgent 特别适合
架构设计：它是怎么工作的？
PageAgent 是一个组织清晰的 monorepo，核心模块分工明确：
packages/
├── core/ # 核心 Agent 逻辑（无 UI）
├── page-agent/ # 带内置 UI 面板的主入口
├── page-controller/# DOM 操作层（独立于 LLM）
├── ui/ # 面板 UI（与 Agent 解耦）
├── llms/ # LLM 客户端适配层
└── extension/ # Chrome 扩展（多 Tab 支持，WIP）
工作流程大致如下：
- 用户输入自然语言指令（如'帮我搜索最新订单'）
- PageAgent 清理当前页面 DOM，提取语义化结构
- 将简化的 DOM + 指令发送给 LLM（支持 Qwen、OpenAI 等）
- LLM 返回操作步骤（点击哪个元素、输入什么内容）
- page-controller 执行具体 DOM 操作
- 循环直到任务完成
关键亮点：不依赖截图
绝大多数竞品（包括 browser-use 的原始方案）要截图发给视觉模型识别。PageAgent 直接用 DOM 结构，这意味着：
- 速度更快（无需图像处理）
- 成本更低（无需多模态模型）
- 准确性更高（结构化信息比图像识别可靠）
怎么用？三种接入方式
方式一：最快体验——Demo LLM
打开官网 alibaba.github.io/page-agent，使用项目提供的免费 Demo API（仅供技术评估，有频率限制），直接在页面上输入指令体验。
方式二：编程接入（BYOK，自带密钥）
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: 'zh-CN',
})
// 用自然语言执行操作
await agent.execute('点击登录按钮')
await agent.execute('把用户名填写为 admin')
await agent.execute('找到最近 7 天的订单，导出为 Excel')
支持任何兼容 OpenAI 接口的 LLM 服务，包括阿里云百炼（Qwen）、OpenAI、Anthropic 等。
方式三：多 Tab 场景——Chrome 扩展
对于需要跨多个标签页操作的复杂任务，可以安装配套的 Chrome 扩展（目前仍在开发中，标注为 WIP）。配置好 API Key 后，Agent 的操作范围可以从单页面扩展到整个浏览器。
隐私与安全
PageAgent 采用 BYOK（Bring Your Own Key） 架构：
- 数据只在你的浏览器和你配置的 LLM 服务商之间流动
- 项目本身没有任何后端，不收集用户数据
- API Key 仅存储在浏览器本地（
localStorage） - 所有配置不会同步到外部服务器
与其他方案对比
| 特性 | PageAgent | browser-use | Playwright/Selenium |
|---|---|---|---|
| 运行环境 | 纯浏览器 JS | Python + 浏览器 | Python/Node + 无头浏览器 |
| 是否需要截图 | ❌ 不需要 | ✅ 需要 | ❌ 不需要 |
| 多模态模型 | ❌ 不需要 | ✅ 需要 | ❌ 不需要 |
| 嵌入现有产品 | ✅ 极易 | ❌ 困难 | ❌ 困难 |
| 适合场景 | 前端增强/Copilot | 服务端自动化 | 测试/服务端自动化 |
值得一提的是，PageAgent 在 README 中坦诚地致谢了 browser-use 项目——DOM 处理组件和部分 Prompt 设计借鉴自该项目，并遵循 MIT 协议开源。开放的态度让人好感度倍增。
总结：它适合谁？
PageAgent 是一个思路清晰、定位精准的开源项目，核心价值在于'轻量嵌入'。
适合这些人用：
- 🎯 想给自家 SaaS / 后台系统快速加上 AI Copilot 的前端开发者
- 🎯 做 RPA 或自动化工具的工程师，想降低环境依赖
- 🎯 希望让老旧内部系统（ERP/CRM）支持自然语言交互的团队
- 🎯 对 Web Agent 技术感兴趣、想研究客户端 Agent 方案的研究者
需要注意的是：
- 目前 Chrome 扩展仍在开发中（WIP）
- 跨域、登录态等复杂场景可能需要额外处理
- Demo API 仅供评估，生产使用需自备 LLM API Key
AI 与 Web 的结合，正在从'服务端控制浏览器'向'Agent 住进页面'演进。PageAgent 是这个方向上一个值得关注的实践。
GitHub 地址：https://github.com/alibaba/page-agent
官网文档：https://alibaba.github.io/page-agent/