Alibaba Page Agent：把 "自然语言" 直接接到你的网页里，AI 替用户点击的时代到了

发表于 2026-06-26 分类于 AI ，开源项目

alibaba/page-agent 是一个纯 JavaScript 的"页面内 GUI Agent"，用一行 script 就能让你的 SaaS / 后台 / 旧系统支持"用一句话操作"。GitHub 19,863 stars，MCP 接入，零后端、零浏览器扩展、零视觉模型，今天 GitHub Trending 第 11。

Alibaba Page Agent：把” 自然语言” 直接接到你的网页里，AI 替用户点击的时代到了

一、客服每天都在重复同一句话

“请先点右上角的设置，再点账户安全，再点修改密码，再……”——

如果你做过 B2B SaaS、ERP、CRM、客服系统，这种对话你应该见过几百遍。用户其实不想看文档、不想学菜单，他们就想说一句” 把我上周的订单导成 Excel 发到我邮箱”。

过去两年，”AI 操作电脑” 这个方向确实火过好几轮 ——browser-use、OpenAI Operator、Anthropic Computer Use、Manus、Claude in Chrome—— 但它们基本都长一个样：装个浏览器扩展、跑个 Python 进程、配个 headless 浏览器、再接一个会看截图的多模态大模型。这套东西对开发者很重，对用户更重：90% 的 B2B 产品根本不可能让用户为了用你的后台而去装一个 Chrome 扩展。

今天登上 GitHub Trending 第 11 名的 alibaba/page-agent（19,863 stars，MIT 协议）走了一条完全不一样的路：它不接管浏览器，它就住在你的网页里。一行 <script>、NPM 一个包，纯 JavaScript 嵌入到任意网页后，你的用户就能用自然语言直接操作这个页面。零后端、零扩展、零视觉模型、零多模态。

换句话说：AI 替用户点按钮这件事，第一次可以” 前端一发上线” 就搞定了。

二、这不是又一款”AI 操作电脑”

把 page-agent 理解成”AI 自动化” 框架是一种典型误读。它和 browser-use、OpenAI Operator 这一票”AI 操作浏览器” 的工具，解决的问题根本不在一个维度上。看官方那张对比表就懂了：

	page-agent	browser-use
部署方式	嵌入到网页里	外部工具
操作范围	当前页面	整个浏览器
目标用户	前端 / Web 开发者	爬虫 / Agent 开发者
典型场景	给产品加 AI 体验	跑自动化任务

翻译一下：

browser-use 解决的是” 我要让 AI 替我控制整个浏览器”—— 爬数据、跑回归测试、批量操作。它站在浏览器外面，是开发者的自动化工具。
page-agent 解决的是” 我要让我网站的用户说一句中文就能完成操作”—— 它是页面里的一个 SDK，是给产品加 AI 体验的组件。

你往 page-agent 的官网 Demo 里丢一个真实网站，它就长在那个网站里，右下角浮一个对话气泡。用户点开说一句” 把这个商品加进购物车，然后跳到结算页”，它就真的在那个页面里找到按钮、点击、跳转。整个过程没有任何浏览器扩展、没有 Python 进程、没有 headless Chrome。

这个定位差异，决定了它能解决另一类工具永远解决不了的问题：旧系统现代化。一个 2010 年写的 jQuery 后台，老板今天想加”AI 助手”，用 browser-use 那一套要装扩展、装 Python、配代理；用 page-agent 只需要把这个 SDK 打进去 —— 老系统的代码一行都不用改。

三、核心功能：把”AI 操作网页” 压到极致简单

page-agent 的功能设计非常克制，全都是围绕” 让前端开发者用最少的代码把 AI 体验塞进页面 “这一件事展开的。我把它浓缩成 5 个亮点：

1. 零依赖嵌入：一行 script 就能用

最快的接入方式就一行：

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

页面加载完，右下角立刻浮出一个 AI 对话气泡。用户不需要装任何东西 —— 没有 Chrome 扩展、没有 Python 环境、没有 headless 浏览器。给 SaaS 客户、内网后台、政府 / 金融这种” 用户电脑被锁得很死” 的场景，简直是量身定做。

中国大陆访问可以用 npmmirror 镜像：

1	<script src="https://registry.npmmirror.com/page-agent/1.10.0/files/dist/iife/page-agent.demo.js"></script>

2. 纯文本 DOM 解析：不需要截图、不要多模态

传统 GUI Agent 的标准做法是截屏→丢给 GPT-4V / Claude 3.5 Sonnet 这种多模态模型看图。page-agent 选了另一条路：直接把 DOM 序列化成” 高密度脱水” 的纯文本喂给 LLM。

这带来的好处是质变级别的：

任何 LLM 都能用 —— 不挑多模态、不挑厂商，Qwen、GPT、Claude、DeepSeek、本地 Ollama 模型都行。
Token 成本砍掉一大截 —— 一张截图的 token 量是同等信息量 DOM 文本的几十倍。
速度快、首字延迟低 —— 文本 token 流式比图片推理快得多。
隐私好 —— 截图里可能包含敏感信息（金额、姓名、未公开的 bug 提示），DOM 文本可以精确控制哪些元素被脱敏。

3. 随你带 LLM（Bring Your Own LLM）

这是 page-agent 第二个杀手锏 —— 模型完全由你定。NPM 包里默认接的是 Qwen3.5-Plus（阿里云百炼），但你可以换成任何 OpenAI 兼容的端点：

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('点击登录按钮')

国外用户可以接 OpenAI、国内用户接 Qwen / DeepSeek、对成本敏感接本地 Ollama、对数据合规要求高可以走私有化部署的 vLLM—— 只要是 OpenAI 兼容的 /v1/chat/completions，就能塞进去。

4. 安全可控：白名单 + 数据脱敏

给”AI 替用户点按钮” 这种能力做安全设计是公认的难题。page-agent 给出了三个机制：

操作白名单（Operation Allowlist）：可以配置”AI 只能点 id 为 add-to-cart 的按钮”，或者”AI 不能访问路由 /admin/*“，从源头控制爆炸半径。
数据脱敏（Data Masking）：可以声明”DOM 里所有 class 为 sensitive-* 的元素，喂给 LLM 时替换成 ***“，保护 PII 和商业敏感数据。
自定义知识注入（Custom Knowledge）：你可以告诉 AI “我们公司叫 ABC，登录页失败 3 次会锁账号 10 分钟”—— 让它按你定义的规则工作，而不是凭 LLM 自己的猜测。

对于做 B2B / 金融 / 医疗 SaaS 的团队来说，这三点是能不能上生产的硬性条件。

5. 跨页面 + MCP 扩展：Beta 但潜力巨大

1.10.0 版本里新加了两个 Beta 功能，点出了 page-agent 下一个阶段的形态：

Chrome 扩展版 Page Agent Ext：让单个页面 Agent 的能力扩展到整个浏览器 —— 跨标签页、跨会话操作。
MCP Server（@page-agent/mcp）：让本地任何 MCP 客户端（Claude Desktop / Cursor / 自研 Agent）都能通过 MCP 协议指挥这个浏览器：

{
  "mcpServers": {
    "page-agent": {
      "command": "npx",
      "args": ["-y", "@page-agent/mcp"],
      "env": {
        "LLM_BASE_URL": "https://api.openai.com/v1",
        "LLM_API_KEY": "sk-xxx",
        "LLM_MODEL_NAME": "gpt-5.2"
      }
    }
  }
}

这两个能力叠在一起意味着：page-agent 既是” 页面内的体验组件”，也是” 页面外的 MCP 工具”。你的 Claude Desktop 在本地，可以直接说” 帮我打开 Shopify 后台，把昨天那 12 个订单标记为已发货”—— 执行不在 Claude 里完成，而是通过 MCP 转交给 page-agent 在你的真实浏览器里完成。本地 Agent + 真实浏览器 + 真实账号这个组合，是 OpenAI Operator 之外的另一条路。

四、实战示例：5 分钟给你的后台装上 AI 助手

下面是给一个真实后台” 加 AI 助手” 的最小可行示例。

场景：让用户能用一句话操作后台

假设你有一个 admin 后台，里面有个表格，用户经常要做” 筛选状态为待审核的订单 → 导出 Excel → 发邮件” 这一串操作。传统做法：写 5 个筛选器、3 个按钮、1 个导出 modal。用 page-agent 可以让用户直接说一句话搞定。

第一步：装包

1	npm install page-agent

第二步：初始化 Agent

// resources/js/agent.js
import { PageAgent } from 'page-agent'

// 1) 创建 Agent
const agent = new PageAgent({
  model: process.env.AGENT_MODEL || 'qwen3.5-plus',
  baseURL: process.env.AGENT_BASE_URL,
  apiKey: process.env.AGENT_API_KEY,
  language: 'zh-CN',
})

// 2) （可选）配置操作白名单和数据脱敏
agent.setConfig({
  // AI 只能点击这些 data-agent-safe 标记的元素
  allowedSelectors: ['[data-agent-safe="true"]'],
  // 喂给 LLM 之前，把 class 含 sensitive 的元素内容替换成 ***
  maskingRules: [
    { selector: '.sensitive', replace: '***' },
  ],
})

// 3) 暴露给 window，方便调试
window.agent = agent

第三步：让后端关键元素” 对 AI 友好”

在关键按钮上加 data-agent-safe，给 AI 一个稳定锚点：

1 2	<button data-agent-safe="true" id="filter-pending">筛选待审核</button> <button data-agent-safe="true" id="export-excel">导出 Excel</button>

data-agent-safe 这个 attribute 是 page-agent 在 prompt 里” 信任” 过的标记，比 id / class 稳定，前端改样式不会影响 AI 识别。

第四步：在页面里挂上气泡

最简单的做法是直接挂一个按钮触发：

1
2
3

<button onclick="window.agent.execute('筛选出所有待审核的订单，导出 Excel，然后打开邮件草稿')">
  🤖 一键搞定
</button>

更优雅的做法是引入一个浮动 UI——page-agent 的 IIFE 包已经自带一个右下角气泡，什么都不用写就有。如果你想自定义，也可以监听 agent 的事件自己渲染：

1
2
3

agent.on('taskStart', (task) => console.log('开始执行:', task))
agent.on('step', (step) => console.log('当前步骤:', step))
agent.on('taskEnd', (result) => console.log('执行结果:', result))

整个过程没有引入新后端、没有改后端代码、没有引入 Python 进程 —— 前端一发上线，SaaS 客户就多了一个”AI 助手” 功能。

五、适用场景和限制

特别适合

B2B SaaS / 后台系统：客服、内部运营、初级用户占比高，” 教用户点哪里” 成本巨大。
旧系统现代化：JQuery / 老 Vue / 老 React 后台，老板想加 AI 体验但不想重写。
企业内部工具：CRM、ERP、HR 系统，IT 部门可以” 一行 script 推” 到所有员工浏览器。
无障碍辅助：视障、老年用户、临时用户，自然语言比学菜单友好 10 倍。
教学 / 培训场景：AI 现场示范” 怎么提交报销”、” 怎么导出报表”，比录屏直观。

需要注意的限制

跨页能力依赖 Chrome 扩展：单页内体验很顺，跨标签页要走 Beta 状态的 Page Agent Ext，生产环境要先做 PoC。
MCP Server 仍在 Beta：API 可能在 1.x 后续版本变动，不建议直接给终端用户。
复杂动态页面（Canvas / WebGL / 重度 Shadow DOM）解析精度会下降：DOM 脱水文本对这些场景不如截图模型稳。
长任务链路要做” 步骤回放 + 人工接管”：AI 一次跑 20 步失败时，需要 UI 兜底。

六、总结

page-agent 给”AI 操作电脑” 这件事提供了一个前端可以独立完成的最小解：

形态上：纯 JS 嵌入，一行 script，零后端、零扩展、零多模态。
模型上：OpenAI 兼容的任意 LLM，国内外、本地云端都随便换。
安全上：白名单 + 脱敏 + 自定义知识，B2B 上生产的硬约束都覆盖了。
扩展上：Chrome 扩展 + MCP Server 已经开了 Beta，指向” 本地 Agent 操控真实浏览器” 的下一站。

如果你的产品形态是” 用户要在网页里完成某个任务”，而你今天还在为” 教用户怎么操作” 而疲于奔命 —— 花 5 分钟接一下 page-agent，可能是 ROI 最高的一次技术决策。

仓库：github.com/alibaba/page-agent
Demo：alibaba.github.io/page-agent
HN 讨论：news.ycombinator.com/item?id=47264138