3 天涨星 2700+，阿里开源了一个能直接接管网页操作的 Page Agent

这两天看到 alibaba/page-agent，我觉得它最值得看的地方，不是“又一个 Agent 项目”，而是它选的落点很实在：不去浏览器外面再套一层自动化，而是把 GUI agent 直接做进网页里。

它主打的是纯页面内 JavaScript。也就是说，不用先起后端，不用 Python，不用无头浏览器，默认也不用浏览器插件。对很多已经有 Web 产品的团队来说，这比“再包一个聊天框”更有参考价值。

项目卡片

• 项目名：Page Agent
• GitHub：alibaba/page-agent
• 当前 Star：4,710（2026-03-12 抓取）
• 涨星速度：近 3 天约 +2700
• 一句话判断：适合给现有 Web 应用补一层自然语言操作。

换句话说，它不是在浏览器外面远程接管网页，而是更像把一只会点、会填、会滚的 AI 手，直接嵌进你自己的产品里。

这张图先帮你抓主定位：Page Agent 更像产品内嵌型 GUI agent，而不是浏览器外部自动化。

为什么值得看

它解决的是“产品内嵌”，不是“浏览器接管”

README-zh 开头写得很直白：纯 JS 实现的 GUI agent，使用自然语言操作你的 Web 应用。无须后端、客户端、浏览器插件。

这句话其实已经把场景说清了。

很多自动化项目默认在解决“替用户接管浏览器”这件事。Page Agent 更像是在解决另一类问题：我已经有一套 Web 应用，怎么最快给它接一层自然语言操作入口。

这个思路对 SaaS、管理后台、ERP、CRM 一类产品尤其现实。用户未必需要一个花哨的 AI 面板，他们很多时候只是想少点十几次按钮。

它优先吃 DOM 文本，不是先靠截图硬猜

这一点我觉得很关键。

从 packages/page-controller/src/PageController.ts 来看，PageController 会先读取当前页面状态，再把可交互区域整理成给 LLM 使用的浏览器状态，包括 URL、标题、滚动信息，以及一份 simplified HTML。

后面的 agent，再基于这份页面状态去决定 click、input、select、scroll 这些动作。

这意味着它默认走的是 基于文本的 DOM 操作，不是先截一张图，再让多模态模型去猜页面上有什么。

这条路线最直接的好处有两个：

• 起步门槛低，不强依赖多模态模型
• 面对表单、按钮、列表、后台页面这类结构化 UI，通常更稳，也更容易控

它不是只给你一个 API，还把可接管的 UI 一起做了

从 packages/page-agent/src/PageAgent.ts 和 packages/core/src/PageAgentCore.ts 能看出来，Page Agent 不是单纯把底层动作封起来就结束了。

它至少拆成了三层：

• PageController：负责读 DOM、管交互
• PageAgentCore：负责按步骤观察、思考、执行，并维护 history / event
• Panel：把执行过程展示出来，方便人在中途接管

这点很重要。很多项目 demo 能跑，但真交给业务同学时，最大问题不是“它不会点”，而是“没人知道它刚刚在干嘛”。Page Agent 至少默认把这层补上了。

这张图对应上面的三层拆分：PageController 负责读状态，PageAgentCore 负责 step loop，Panel 负责把过程展示出来。

它大概是怎么跑起来的

如果你只想抓主线，记这一条就够了：

页面 DOM → PageController 提取状态 → PageAgentCore 按 step 循环决策 → 执行 click / input / select / scroll → Panel 展示过程

PageAgentCore 里的执行循环也比较清楚：

• 先 getBrowserState() 观察当前页面
• 把任务、history、browser state 组进 prompt
• 让 LLM 选择下一步动作
• 执行动作，把结果写回 history
• 一步一步跑到 done

所以它不像那种“一个黑盒 demo 跑完拉倒”的仓库。它是把结构拆开了：想开箱就用 PageAgent，想自己接 UI 或做更深的控制，就往 PageAgentCore 和 PageController 往下看。

这里我把能力图收成 3 个真正关键的抓手：DOM 文本路线、页面内执行、工具扩展；手机上一眼就能看完。

最短上手闭环

如果你只是想 5 分钟感受一下，最短路径就两条。

先试 Demo CDN

README 给了 demo 版脚本，直接插一行就能体验：

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

这条路适合快速看效果。

不过官方也写得很明白：这个免费测试接口更适合技术评估，不适合直接拿去上线。

正式接入就 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('点击登录按钮')

如果你的目标只是先在自己的后台、表单流或者运营系统里做一个自然语言入口，这已经足够跑出第一个闭环。

这张图对应“先试 Demo，再判断适配场景，最后正式 npm 接入”的三步路径，适合移动端快速扫一眼。

还有两处我会特别留意

1. customTools 让它不只会点页面

PageAgentCore 里支持 customTools。这件事很关键。

因为真正有价值的产品内 AI，往往不是只会“替你点页面”，而是能把页面动作和业务动作串起来。比如查内部知识库、走审批流、调某个业务接口，这样才更像完整闭环，而不是自动点点点。

2. transformPageContent 很适合做脱敏和裁剪

源码里也给了 transformPageContent 这个入口。它会在页面内容送进 prompt 之前先做一层处理。

这个钩子对企业场景挺实用：

• 可以先把手机号、邮箱、身份证之类的信息打码
• 也可以把无关的大段页面内容裁掉，减少噪音

这比事后提醒“别把敏感信息给模型”更像真正能落地的做法。

适不适合你

如果你现在碰到的是下面这类需求，我会建议认真看看它：

• 你有现成的 Web 应用，想加一个自然语言副驾驶
• 页面以表单、按钮、列表、后台流程为主
• 你想先在前端快速验证，而不是先搭一整套自动化基建

但如果你的目标是这些，优先级就没那么高：

• 大规模网页采集
• 稳定的跨站、多页面、无人值守浏览器自动化
• 完全不接受前端侧接入 LLM

原因也不复杂：Page Agent 的强项是 in-page automation。 跨页面任务不是它的默认主场，仓库给的是可选 Chrome 扩展支持，而不是把浏览器级控制当成基础前提。

最后一句

我会把它看成一个很典型的“方向选得对”的项目。

它不想当万能浏览器自动化平台，而是先把一件更具体的事做好：给现有网页加上一只 AI 的手。

如果你最近正想给自己的 Web 产品接自然语言操作，这个仓库值得从 README-zh、PageController、PageAgentCore 这几个入口一起看。

想直接去看仓库的话，GitHub 就搜 alibaba/page-agent。

如果这篇对你有用，建议点个关注。我会持续把 GitHub 上值得用的 AI 工具拆成「最短上手闭环 + 坑点清单 + 可复用配置」，让你少走弯路。

关注微信公众号

想第一时间看到后续的工具拆解与实战更新，欢迎扫码关注公众号。