alibaba/page-agent 是阿里官方开源的页面内嵌 AI Agent 框架,GitHub 上 25,500+ stars。它的思路很直接:在任何网页里嵌入一行 JavaScript,这个网页就拥有了自己的 AI Agent——用户说一句话,Agent 会自动操作按钮、表单、链接,完成原本需要点击数十次才能完成的任务。

跟 browser-use、Stagehand 这类需要 Python 后端或 headless browser 的方案不同,page-agent 完全跑在浏览器端,不依赖截图,也不需要多模态 LLM。它基于文本 DOM 做操作,因此响应更快、成本更低,而且能跟现有的网页无障碍能力无缝衔接。

项目由阿里巴巴维护,中英双语文档齐全,提供全球与中国两套 CDN 镜像,npm 包名直接叫 page-agent,MIT 许可证可直接商用。它不是孤立的项目,而是阿里在 AI Agent 基础设施领域的一枚棋子,跟浏览器侧的 MCP 生态、阿里云的通义千问、淘宝的 npmmirror 镜像站共同构成一组工程化体系。

一、项目简介

page-agent 由 alibaba 组织开源并持续维护,定位是「页面内嵌的 GUI Agent」。它的目标很明确:让 SaaS 产品、后台管理系统、内部工具,在不改后端的前提下,接入一个能听懂自然语言的 AI 操作助手。

它并非从零造轮子。底层基于 Gregor Zunic 的 browser-use(同样 MIT 协议)。browser-use 是 Python 生态里最早做浏览器侧 AI Agent 的开源项目之一,在 GitHub 上也积累了极高的 star 量,但它的部署门槛偏高——需要 Python 环境 + headless browser 进程,接入前端 SaaS 时通常还要维护一个独立的后端服务。阿里团队看准这一痛点,做了一次封装与精简,把原本需要 Python + headless browser 的链路压缩成「前端一行 JS」。这种「做减法」的产物,对国内外的 SaaS 厂商、独立开发者、企业内网工具开发者都非常友好。

几个核心数字:

  • GitHub 上已超过 25,500 stars,过去 30 天新增约 6,800 stars
  • 长期处于 TypeScript trending 榜单前 10
  • npm 包 page-agent 当前最新版为 1.12.0
  • 许可证:MIT,商用无忧
  • 语言:TypeScript 100%

需要单独提到的是,page-agent 的 DOM 处理组件和提示词工程直接源自 browser-use,这套组合在工业界已经被多次验证,从这一点看,它站在巨人肩膀上。

二、核心功能

2.1 一行脚本嵌入,无后端改造

通过 <script> 标签或 npm install page-agent 即可在任何网页里运行 PageAgent。SaaS 产品可以在不改现有架构的前提下接入 AI Copilot。即使产品后端是 Java、Go、Python、PHP,只要能给前端返回 HTML,就能加载 page-agent。

2.2 基于文本 DOM,无需视觉模型

传统浏览器 Agent 通常依赖截图 + 多模态 LLM:先对网页截图,再把图像传给视觉语言模型,模型判定点击位置。page-agent 完全跳过截图环节,直接读取 DOM 节点的结构化文本,这意味着响应更快、token 消耗低一个量级,而且对 LLM 没有视觉能力要求,通义千问这种纯文本模型也能用。

2.3 模型可换,接口开放

支持任何兼容 OpenAI 协议的模型——通义千问 qwen3.5-plus、Claude Sonnet、GPT-4o 系列,以及本地 vLLM、Ollama 部署的开源模型都能对接。具体支持的模型在官方文档的「supported models」页列出,常见的几十种都兼容。

2.4 Chrome 扩展(可选,跨页任务)

需要跨标签页操作时,可以装官方 Chrome 扩展,从而让 Agent 同时穿梭于多个网页。这一功能对运营、测试、客服场景特别有用。

2.5 MCP Server(Beta 版)

对外部 Agent 客户端开放控制接口,意味着 Claude Code、Cursor 之类的开发工具,可以直接调用这个浏览器上的 page-agent。这把 page-agent 从「独立使用的工具」升级成「Agent 网络中的执行节点」。

2.6 双 CDN 镜像

jsDelivr 提供全球 CDN,淘宝 npmmirror 提供中国大陆 CDN,国内访问也能秒开,不需要额外配置 proxy。

2.7 中英双语文档

主仓库 docs/ 下有完整的中文 README(/docs/README-zh.md),降低国内开发者上手门槛。主要章节(快速开始、模型配置、Chrome 扩展、MCP、贡献指南)都有中文版本。

2.8 浏览器侧完整环境

不需要 headless browser,不需要 Python 后端,不需要 Docker,所有逻辑都在浏览器进程里完成。这对部署在严格网络环境(比如企业内网、隔离开发环境)的项目尤其重要。

2.9 内置免费测试 API

Demo CDN 自带阿里提供的免费测试 LLM API,用户加载脚本后立刻就能用,不需要先去申请通义、OpenAI、Claude 的 API key。这对前端开发者做 POC 演示、教学演示非常友好。

2.10 智能提示词工程

内置提示词模板基于 browser-use 的工程实践,涵盖操作意图识别、当前页面结构提取、操作步骤推导、错误重试策略四个维度。用户可以自定义扩展,但默认配置已经覆盖 80% 的常见场景。

三、使用场景

3.1 SaaS AI Copilot

CRM、ERP、设计工具、客服后台,几行代码嵌入 AI 操作助手,用户一句话完成复杂流程。SaaS 厂商把 page-agent 内嵌到自家产品的设置页、报表页、表单页,可以让用户用自然语言替代多次点击。

3.2 智能表单填写

把原本需要 20 次点击的表单录入流程,压缩成一句「帮我把这批客户资料填进去」。对运营人员、行政人员、HR 的日常工作能节省大量重复劳动。

3.3 无障碍访问

让原本依赖屏幕阅读器或键盘操作的视障用户,通过自然语言完成网页操作,降低使用门槛。这一点跟 W3C ARIA 标准天然兼容,因为 page-agent 直接基于 DOM 而非视觉坐标。

3.4 后台批量任务

测试环境的批量数据提交、运营配置的批量修改,Agent 自动按规则执行,解放双手。对 QA 工程师特别有用,可以一次跑完 50 条用户激活流程、50 条退款流程。

3.5 跨页任务编排

通过 Chrome 扩展,让 Agent 同时操作多个 Tab,完成数据迁移、订单核对这类工作。例如从 A 系统导出订单,自动到 B 系统里逐条核对状态。

3.6 Agent-to-Agent 协作

通过 MCP Server,把浏览器变成可被外部 Agent 调用的「执行终端」。Claude Code 在分析代码时发现需要调用内部管理系统,可以驱动 page-agent 完成实际点击操作。

3.7 教学与演示

Demo CDN 自带免费 API,很适合做 AI Agent 教学、IDE 嵌入示例、产品演示视频。讲师可以在不暴露真实 API key 的情况下让学生体验完整链路。

3.8 客户支持自动化

接入客服系统后,把客服人员「查一下这个订单的状态」「给客户改一下收货地址」这类高频操作自动化。Agent 直接驱动后台系统,客服只负责处理边缘 case。

3.9 个人效率工具

独立开发者、个人用户可把自己的工作流页面(财务记账、Todo 列表、博客后台)用 page-agent 串起来,用自然语言替代点击。

四、安装与使用

4.1 最快的体验方式(零部署)

在任意 HTML 里加一段:

<script src="https://cdn.jsdelivr.net/npm/page-agent@1.12.0/dist/iife/page-agent.demo.js"></script>

页面加载后,右下角会出现 PageAgent 的对话入口——自带免费测试 API,直接上手就能用。这种方式适合用来做产品演示、教学示例,以及在不暴露真实 LLM API key 的前提下体验完整功能。

4.2 正式接入(可控参数)

先用 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: 'zh-CN',
})

await agent.execute('点击右上角的登录按钮')

execute() 是核心方法,接受自然语言指令,Agent 会按指令去理解当前 DOM 结构,推导出操作步骤,然后逐个执行。每一步执行后 Agent 都会重新读取 DOM,确保下一步决策基于最新页面状态。

4.3 关闭自动初始化

在脚本 URL 后加 ?autoInit=false,再用 new window.PageAgent(...) 自定义行为。这种方式适合做商业化定制,可以完全控制 Agent 的触发时机、UI 样式、可用模型。

4.4 API 密钥安全管理

默认情况下,API key 写在前端代码里,这对个人小工具可行,但对生产环境的 SaaS 产品不安全。推荐做法是搭建一个最小的后端代理服务,前端发起请求时携带用户的会话 token,后端服务用自家密钥调用 LLM,再把结果返回前端。PageAgent 提供了 baseURL 参数,完全可以指向这种自建代理。

4.5 生产环境部署技巧

如果要在生产环境部署,推荐以下几项基础配置:一是设置合理的请求超时(默认 30 秒适合大多数场景);二是配置 language 参数匹配用户地区;三是开启错误回调,在 Agent 操作失败时提示用户改用其他方式;四是对接公司现有的监控体系,把 Agent 的执行日志接到 ELK 或 SLS。

4.6 国内网络环境优化

国内用户注意把 baseURL 切到阿里云 dashscope 或国内推理服务商,例如 deepseek、智谱、月之暗面。script 加载也建议使用淘宝的 npmmirror CDN,这样可以避免 jsDelivr 在某些时段的访问问题。

五、技术亮点

5.1 与 browser-use 的关系

page-agent 直接 fork 了 browser-use 的 DOM 处理逻辑与提示词工程(协议兼容 MIT),去掉了 Python 后端依赖,把 agent 完整跑在前端侧。这意味着两者的核心能力几乎是平齐的,但部署门槛 page-agent 低了几个数量级——前端开发者就能上手,而 browser-use 通常需要 Python 后端工程师配合。

5.2 不依赖截图,响应更快

传统浏览器 Agent 一张截图几 MB,扔给多模态模型又要几秒。page-agent 只读 DOM,单次操作延迟通常 1-2 秒,token 成本降低一个量级。粗略估计,完成同样的「点击登录按钮 → 输入账号 → 输入密码 → 点击提交」流程,视觉方案消耗约 5000 tokens,文本 DOM 方案约 500 tokens。

5.3 模型无关,接口标准

通过 OpenAI 兼容接口对接,本地 Ollama、vLLM、API 服务都能接入,不绑定任何厂商模型。这种解耦对成本敏感或合规要求高的企业尤其重要——可以选用合规厂商的私有化部署方案,而不是必须走 OpenAI。

5.4 文本 DOM 优于视觉 DOM

视觉方案受限于网页视觉差异、CSS 主题切换、暗黑/明亮模式;文本 DOM 跨主题、跨浏览器一致,稳定性更好。从工程角度说,DOM 操作的可测试性也更高,开发者可以在脚本里直接 mock 节点结构做单元测试。

5.5 提示词工程优化

内置的提示词模板针对中文用户做了多轮优化,在「意图识别 + DOM 摘要 + 操作步骤推导」三个环节都有专门的 few-shot 示例。这是从 browser-use 项目中继承并裁剪的工业级提示词,不是简单的「你是一个 Agent」开头。

5.6 与 MCP 生态深度集成

支持 Model Context Protocol Server,这是当前 AI Agent 工具链的事实标准之一。任何兼容 MCP 的客户端(Claude Code、Cursor、Windsurf、Cline)都可以直接控制 page-agent,使它成为 Agent 网络中的执行节点。

六、同类项目对比

仓库 语言 部署方式 核心差异
alibaba/page-agent TypeScript 一行 JS / npm 浏览器侧运行,无需后端
browser-use Python 需要 Python + 浏览器 项目鼻祖,生态最全,功能更复杂
Stagehand TypeScript Node.js 库 偏向测试自动化,AI 介入较浅
Skyvern Python 服务端调度 偏向企业流程审批

如果目标是「给现有网页加 AI 助手」,page-agent 的集成成本最低。SaaS 厂商、独立开发者、企业内网工具开发者都会受益于它的一行脚本嵌入模式。

如果是要做浏览器侧的自动化测试 + 爬虫,browser-use 更合适。browser-use 的 Python 生态成熟,有 Playwright、Puppeteer 集成的诸多变体,可以做更细粒度的控制。

Stagehand 偏向测试自动化,AI 介入较浅,适合写测试脚本的工程师,不适合需要真正「听懂自然语言」的场景。

Skyvern 偏向企业流程审批,在企业级 RPA 场景有积累,适合大型组织的内部流程自动化。

七、常见问题

PageAgent 是免费的吗?

完全免费,MIT 许可证。只需要自己提供 LLM 的 API key(通义、OpenAI、Claude 或本地模型均可)。Demo CDN 自带免费测试 API,但仅供体验,不适合生产环境。

需要后端服务器吗?

不需要。它跑在浏览器端,所有 DOM 解析、提示词组装都在前端完成。如果希望保护自己的 API Key,可以走自己的后端代理 LLM 接口——page-agent 通过 baseURL 参数支持这种模式。

支持中文页面吗?

支持。language 参数可设 zh-CN,Agent 会优先用中文理解指令并操作中文界面。模型层也建议配合支持中文的模型,例如通义千问、DeepSeek、智谱 GLM、Claude、GPT-4o。

可以商用吗?

可以。MIT 许可证允许商用,只需要保留版权声明与许可声明。商业化上线前建议读一下官方维护者说明(项目 Issues 区 #349),了解目前的功能边界和已知限制。

跟 browser-use 是什么关系?

page-agent 直接构建在 browser-use 的 DOM 操作与提示词工程之上(均基于 MIT 协议)。可以理解为「page-agent 是 browser-use 的前端精简版」。两者的核心 AI 能力平齐,但 page-agent 的部署门槛低了几个数量级。