你正在用一个复杂的企业后台系统，要完成一个报销流程需要点击十几个按钮、填写五六个表单。你对屏幕说"帮我提交一份差旅报销"，然后 AI 真的开始自动点击、填写、提交，几秒钟就搞定了。
Page Agent 是阿里巴巴开源的一款纯前端 GUI Agent（图形界面智能体）。它的核心定位很简单：让 AI 住进网页里，用自然语言操控一切。
Github：
一句话说清楚：Page Agent 是什么？
Page Agent 相当于网页里的"AI 操作员"。
它不需要浏览器扩展、不需要 Python 后端、不需要无头浏览器。只需要一行 <script> 标签嵌入你的网页，用户就能用大白话指挥 AI 操作页面——点击按钮、填写表单、提取数据，样样都行。
简单说，它就像给你的网页装了一个"智能外挂"，让任何网页都能听懂人话。
为什么需要 Page Agent？
传统的网页自动化工具（比如 Selenium、Playwright）有个共同特点：它们都是"外部控制"。
你想自动化一个网页，得搭建后端服务、安装 Python 环境、启动无头浏览器、写一堆配置代码。而 Page Agent 的思路完全不同——它直接住在网页里。
作为网页的一部分，它不需要后端（纯前端 JavaScript 实现）、不需要用户装插件（可选扩展仅用于跨标签页）、不需要截图识别（直接操作 DOM），5 分钟就能集成到现有项目。
核心优势：为什么它能脱颖而出？
纯前端架构，零基建快速接入
Page Agent 最突出的优势是"无门槛集成"。开发者只需通过一行 CDN 脚本或 NPM 安装，就能快速将其嵌入网页。对于前端开发者而言，半天就能给产品加上 AI 助手功能；产品经理可自行制作 Demo 演示需求；运营同学能通过一句话完成复杂后台操作。相比传统工具"安装依赖→配置环境→启动服务"的复杂流程，Page Agent 的接入门槛几乎为零。
无需截图识别，精准高效更省钱
不同于依赖多模态模型、通过截图+OCR 识别页面的工具，Page Agent 直接读取和操作页面 DOM 结构，将 DOM 转化为结构化文本后提交给大模型。这种方式带来三大好处：速度更快（无需处理图像数据）、成本更低（无需昂贵的多模态模型）、准确性更高（基于 DOM 结构不受样式影响）。
自然语言交互，人人都能操控网页
用户无需编写任何代码、无需熟悉页面 DOM 结构，只需用大白话下达指令，就能让 AI 完成各类页面操作。无论是"点击登录按钮并填写账号密码""提取页面所有商品的名称和价格"，还是"提交一份旅行报销单"，Page Agent 都能精准理解意图。更贴心的是，它支持"人机协同"设计，执行操作前会展示规划步骤，遇到歧义时会主动询问用户。
灵活兼容，隐私安全有保障
Page Agent 采用"BYO LLM"（自带大模型）架构，支持接入所有兼容 OpenAI API 格式的模型，包括 OpenAI、Claude、通义千问、豆包、DeepSeek 等，也可对接本地 Ollama 模型实现离线运行。
工作原理：DOM 驱动的智能操作
Page Agent 的工作流程可以简化为四个步骤。 DOM 提取：实时扫描页面，将复杂的 DOM 树转化为结构化的文本表示，提取元素的标签、属性、文本内容、位置信息等。 文本化处理：将 DOM 树"脱水"成简化文本，只保留对操作有意义的信息，比如一个按钮会被描述为"[3] 提交按钮 (type=submit)"，其中 3 是元素索引。 LLM 决策：将简化后的 DOM 文本 + 用户指令一起发送给大模型，大模型分析当前状态，决定下一步操作（如"点击索引为 3 的元素"）。 执行操作：Page Agent 根据 LLM 返回的指令，调用 PageController 执行具体的 DOM 操作（点击、输入、滚动等），然后循环回到第一步。
用户输入指令
↓
提取页面 DOM → 转化为简化文本
↓
发送给 LLM 分析 → 获取下一步动作
↓
执行操作（点击/输入/滚动）
↓
判断是否完成任务？
- 否 → 继续循环
- 是 → 结束
快速上手：5 分钟跑起来
方式一：一行代码集成（最简单）
fastest 方式是用阿里提供的免费 Demo LLM：
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.8.1/dist/iife/page-agent.demo.js" crossorigin="true"></script>
⚠️ 注意：这个 Demo CDN 仅用于技术评估，使用阿里免费的测试 LLM API。
国内用户可以用 npm 镜像：
<script src="https://registry.npmmirror.com/page-agent/1.8.1/files/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('点击登录按钮')
核心功能详解
智能表单填写：Page Agent 能自动识别表单元素，根据自然语言指令完成填写。比如你说"填写用户名 admin，密码 123456"，它会自动找到对应的输入框并填入内容。
数据提取：你可以让 Page Agent 从页面提取结构化数据。比如"提取这个表格里的所有商品名称和价格"，它会遍历表格 DOM，返回整理好的数据。
复杂流程自动化：对于需要多步骤操作的流程（如"搜索商品→选择分类→加入购物车→结算"），Page Agent 能自动规划操作序列并执行。
人机协同（Human-in-the-Loop）：执行关键操作前，Page Agent 会展示规划步骤让用户确认。遇到歧义（如页面上有多个"提交"按钮）时，会主动询问用户选择哪一个。
浏览器扩展（可选）：如果需要跨标签页操作（比如"在 A 页面复制数据，粘贴到 B 页面"），可以安装 Page Agent 的 Chrome 扩展。
MCP Server（Beta）：允许外部 Agent 客户端控制你的浏览器，实现更复杂的自动化场景。
实际应用场景
SaaS 产品 AI Copilot：在 ERP、CRM、后台管理系统中集成 Page Agent，让用户用自然语言完成复杂操作。比如"帮我导出上个月的销售报表""把状态为待审核的订单全部通过"。
智能表单填写：将 20 次点击的复杂流程变成一句话。特别适合审批系统、报销系统、数据录入等场景。
无障碍辅助：让视障用户通过语音命令操作网页，或者让老年人用大白话完成网上办事。
自动化测试：用自然语言描述测试用例，Page Agent 自动执行并验证结果。比如"测试登录功能，尝试错误密码三次，验证是否出现锁定提示"。
数据采集：从网页批量提取信息，比如"抓取这个列表页前 50 条数据的标题和链接"。
与同类项目的区别
| 项目 | 架构 | 特点 | 适用场景 |
|---|---|---|---|
| Page Agent | 纯前端 | 无需后端、DOM 驱动、轻量级 | 网页增强、SaaS Copilot |
| UI-TARS Desktop | 桌面应用 | 视觉驱动、跨应用操作 | 桌面自动化 |
| Browser-use | Python 后端 | 功能丰富、需要后端 | 复杂自动化流程 |
| Playwright | 测试框架 | 专业测试、学习曲线陡 | 自动化测试 |
Page Agent 的独特优势在于：纯前端、零基建、即插即用。
适合谁用？
适合这些人：想给产品快速添加 AI 助手功能的前端开发者、需要简化复杂后台操作的产品经理/运营、做无障碍辅助工具的开发团队、想降低用户使用门槛的 SaaS 厂商。
不适合这些人：需要跨应用操作（不只是网页）的场景、对数据安全有极高要求（DOM 信息会发送给 LLM）、页面结构极其复杂或频繁变动的网站。
安全与隐私提醒
风险包括 DOM 信息需要发送给 LLM 可能泄露页面敏感数据、AI 可能误操作（比如在生产环境误删数据）、如果 LLM API 密钥泄露可能被恶意利用。
建议是不要在包含敏感数据的页面使用、关键操作前开启人机确认、使用本地模型（如 Ollama）避免数据上传云端、给 AI 设置操作白名单限制可执行的操作类型。
Github：
写在最后
Page Agent 代表了一个重要趋势：AI 正在从"独立应用"变成"网页的一部分"。
以前的 AI 工具都是独立的聊天窗口，现在它可以直接嵌入网页，成为用户操作界面的自然延伸。这就像是给每个网页都配了一个"智能助手"，随时待命、随叫随到。
但是复杂页面的理解准确率、长流程的稳定性、安全性保障，都还有提升空间。但方向是明确的——未来的网页会越来越"听得懂人话"。
关注
如果这篇文章对你有帮助，欢迎点赞、在看、转发三连。我们会持续分享更多 AI 工具和实战经验的解读。
