你有没有遇到过这种情况：一个老旧的内部后台、一个政府办事网站、一个供应商的订单系统——UI 停留在十年前，每次操作都要点十几个按钮、填一堆表单。如果能用一句"把购物车里的商品按价格排序"就让 AI 自动完成，是不是省事很多？

阿里开源的 Page Agent 就是干这件事的。官方一句标语概括得很到位："住进你网页的 GUI Agent——一行脚本让任何网页拥有自己的 AI agent。" GitHub 上 26.8k stars、2.4k forks，MIT 协议，最新版本 v1.12.2（2026-07-16 发布，累计 37 个 release）。

仓库地址：https://github.com/alibaba/page-agent

Page Agent 是什么

它是一个基于 JavaScript（TypeScript 占比 82.6%）的 in-page GUI Agent，运行在浏览器客户端，直接操控当前网页的 DOM。核心定位官方写得很明确：为客户端网页增强设计，不是服务端自动化。

这带来一个关键区别：

Page Agent 的 DOM 处理组件和 prompt 工程派生自知名的 browser-use 项目（官方在 Acknowledgments 里明确致谢），但定位不同——它解决的是"让某一个具体网页获得 AI 操作能力"，而不是"让 AI 替我操控整个浏览器"。

它是怎么工作的

四个核心特征（都来自官方 README）：

• 纯客户端运行：不需要浏览器扩展、不需要 Python、不需要 headless browser，全在你的网页里跑。
• 基于文本的 DOM 操作：不截图、不依赖多模态大模型、不需要特殊权限——它把 DOM 转成结构化文本喂给模型，再把模型输出翻译成 DOM 操作。
• 自带模型（Bring Your Own LLM）：兼容主流大模型，包括本地部署的模型。
• 可选的 Chrome 扩展 + MCP Server（Beta）：需要跨多标签任务时用扩展；MCP Server 则让外部 agent 客户端能反过来控制浏览器。

典型执行流程：

1. 解析 DOM：读取当前网页结构，识别可交互元素（按钮、输入框、链接、表格）
2. 理解语义：把 DOM 转成模型能理解的结构化描述
3. 接收自然语言指令：比如"把表格按日期降序排列""填好这个表单，收货地址用默认地址"
4. 在页面内执行：直接对 DOM 触发点击、输入、导航等操作

因为不依赖截图，部署非常轻量，也避开了多模态模型带来的延迟和成本。

快速接入：两种方式

方式一：一行 CDN 脚本（最快体验）

官方推荐的最快上手方式，配合它提供的免费 Demo LLM 直接跑：

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

<!-- 国内访问不了 jsDelivr 的话，用镜像 -->
<!-- https://registry.npmmirror.com/page-agent/1.12.2/files/dist/iife/page-agent.demo.js -->

⚠️ 官方明确说明：这个 demo CDN 用的是它的免费测试 LLM API，仅供技术评估。想用自己的模型，加 ?autoInit=false 让脚本不自动创建 demo agent，再用 new window.PageAgent(...) 传入你自己的 LLM 配置实例化。

方式二：npm 工程化集成（适合产品内置）

前端/全栈开发者想把它原生集成进自己的产品（比如给 SaaS 加一个 AI 操作助手），走 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: 'en-US',
})

await agent.execute('Click the login button')

配置项支持 model / baseURL / apiKey / language，agent.execute(...) 传入一句自然语言任务即可。Page Agent 是 monorepo（npm workspaces），核心在 packages/page-agent/ 下，自带 UI Panel。

💡 生产集成提示：集成进自家产品时注意网站的 CSP（Content Security Policy）限制，以及前端不要硬编码 LLM API key——企业场景建议自建 LLM 网关或走代理。先在 staging 环境验证再上线。

官方列出的典型场景

README 里给了五个明确的 use case，比"老旧网站加 AI"更具体：

• SaaS AI Copilot：几行代码给你的产品内置 AI copilot，不用重写后端
• 智能表单填写（Smart Form Filling）：把 20 次点击的工作流压缩成一句话，适合 ERP / CRM / 后台管理系统
• 无障碍（Accessibility）：让任何网页都能通过自然语言操作，支持语音指令、屏幕阅读，零门槛
• 跨页 Agent（Multi-page Agent）：通过 Chrome 扩展把网页 agent 的能力扩展到多个浏览器标签
• MCP：让你的 agent 客户端能反过来控制浏览器

不太适合的场景：需要 100% 确定性的关键业务流程（Agent 有概率性，关键链路还是走官方 API 更稳）。

和 browser-use 的关系

最常被问到的问题。官方 Acknowledgments 写得很清楚：Page Agent 的 DOM 处理组件和 prompt 派生自 browser-use（Gregor Zunic 的 MIT 项目）。但两者定位不同——browser-use 控制整个浏览器，Page Agent 只在当前页面内工作，部署形态是客户端 JS，不需要 Python、headless 浏览器或浏览器扩展。

写在最后

Page Agent 把"AI 操作网页"这件事的门槛压到了一行脚本的程度，对前端开发者尤其友好——它也是一个值得拆解的工程范本：如何用客户端 JS + LLM 构建一个不依赖截图的 in-page agent。建议直接去 GitHub 仓库看 README 和源码，那里有最准确的接入指引和 demo 视频。

仓库地址：https://github.com/alibaba/page-agent （MIT 协议，npm 包名 page-agent，最新版 v1.12.2）

诚实声明：本文基于 Page Agent 官方 GitHub 仓库 README 的公开信息撰写（stars / 版本号 / 代码片段 / use case 均来自仓库页面，截至 2026-07-18）。具体 API 与配置以仓库最新文档为准。