1.5k stars！阿里开源 PageAgent：让 AI 直接“住进“你的网页，用自然语言操控一切！

PageAgent 是一个思路清晰、定位精准的开源项目，核心价值在于"轻量嵌入"。🎯 想给自家 SaaS / 后台系统快速加上 AI Copilot 的前端开发者🎯 做 RPA 或自动化工具的工程师，想降低环境依赖🎯 希望让老旧内部系统（ERP/CRM）支持自然语言交互的团队🎯 对 Web Agent 技术感兴趣、想研究客户端 Agent 方案的研究者目前 Chrome 扩展仍在开发中（W

mymessageone

401人浏览 · 2026-03-08 12:40:53

mymessageone · 2026-03-08 12:40:53 发布

阿里开源 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	服务端自动化	测试/服务端自动化