把 AI Agent 放进网页：Page Agent 如何用 DOM 让自然语言直接操作 UI
# 把 AI Agent 放进网页：Page Agent 如何用 DOM 让自然语言直接操作 UI
当我们说「让 AI 操作浏览器」，直觉通常会想到浏览器扩充功能、Playwright、Selenium，或需要截图理解画面的多模态模型。但另一条路是：把 Agent 直接放进目前正在执行的网页，让它读取 DOM、理解互动元素，再用自然语言完成操作。
[Page Agent](https://github.com/alibaba/page-agent) 就是沿着这条路设计的开源 JavaScript GUI Agent。它的官方定位是「living in your webpage」：透过一段脚本，让任何网页拥有自己的 AI Agent。本文不只介绍功能，也会从实作角度拆解它的整合方式、适用场景与不能忽略的安全限制。
## 一、它解决的不是「看懂画面」，而是「控制网页介面」
传统浏览器自动化常把问题拆成两层：先取得页面状态，再透过选择器或座标触发操作。这在固定流程中很可靠，但当使用者用自然语言描述任务，例如「把这张订单改成待出货，然后填入备注」，系统还需要一层把意图对应到介面元素。
Page Agent 的做法是把这一层直接放在页面里：
1. Agent 取得目前网页可互动的结构。
1. LLM 根据任务与页面资讯决定下一个动作。
1. 页面控制器对 DOM 元素执行点击、输入或其他 UI 操作。
1. Agent 观察结果后，继续或结束任务。
官方 README 特别强调它采用文字型 DOM 操作，不需要截图、多模态 LLM 或特殊权限。这让它更像一个「嵌入式 UI 控制层」，而不是远端操控整个浏览器的黑盒子。
## 二、从套件结构看 Page Agent 的分工
目前 repository 使用 workspace 管理多个套件，核心可分成几个部分：
- `page-agent`：对外提供 `PageAgent` 类别与整合入口。
- `@page-agent/core`：处理 Agent 核心流程。
- `@page-agent/page-controller`：负责页面与 DOM 控制。
- `@page-agent/llms`：负责 LLM 呼叫、工具呼叫与重试。
- `@page-agent/ui`：提供页面上的互动面板。
- `@page-agent/mcp` 与 `@page-agent/extension`：分别支援 MCP Server 与跨页面的 Chrome Extension 能力。
从公开原始码可以看到，`PageAgent` 建构时会建立 `PageController`，再把它交给核心 Agent；同时初始化页面上的 `Panel`。这种组合方式很适合「把 Agent 当成前端元件」使用：控制器负责做事，核心负责推理，面板则负责让人与 Agent 协作。
LLM 层则要求至少提供 `baseURL` 与 `model`。官方实作预设使用 OpenAI-compatible client，并提供可重试的呼叫流程；这表示它不把模型供应商硬编码成单一服务，而是把相容 API 的设定交给整合者。
## 三、最小整合：一段脚本让页面出现 Agent
最快的试用方式，是直接载入官方提供的 IIFE bundle：
```html
```
官方 README 将这个 Demo CDN 定位为技术评估用途。若要在自己的产品中正式整合，则可改用 npm：
```bash
npm install page-agent
```
```javascript
import { PageAgent } from 'page-agent'
const agent = new PageAgent({
model: 'your-model',
baseURL: 'https://your-openai-compatible-endpoint/v1',
apiKey: 'your-client-side-credential',
language: 'zh-TW',
})
await agent.execute('开启订单页面，找到最近一笔订单并展开详细资料')
```
这段程式的重点不是特定模型名称，而是 Page Agent 的整合边界：页面负责提供 UI，`PageAgent` 负责建立控制器与推理流程，LLM endpoint 则由应用程式配置。
## 四、为什么 DOM 驱动值得注意？
### 1. 不必把每一步都写死
固定选择器适合稳定流程，但产品 UI 一改版就可能需要同步修改脚本。自然语言任务则把「想做什么」与「元素目前在哪里」分开，让 Agent 根据当下页面状态做决策。
### 2. 不一定需要多模态模型
Page Agent 官方主打文字型 DOM 操作。对表单、按钮、选单、后台管理介面等结构化 UI，这种做法可以避免每一步都传送截图，也降低对视觉模型与浏览器权限的依赖。
### 3. 更容易嵌入产品体验
它不是只供内部测试的外部自动化脚本，也可以变成 SaaS 产品中的 AI Copilot。例如在 ERP、CRM 或管理后台中，让使用者用一句话完成原本需要多次点击的流程。
不过，DOM 驱动并不代表所有网页都能可靠自动化。画布型介面、需要视觉判断的元件、封闭式 iframe、复杂权限流程与高度动态的页面，都可能需要额外设计或不同工具配合。
## 五、三个适合落地的使用场景
### SaaS 产品内建 Copilot
产品团队可以把 Page Agent 放在自己的管理介面里，让使用者直接下达「建立一个本月有效的折扣方案」或「找出逾期帐款并汇出」等指令。Agent 操作的仍是既有 UI，因此不一定需要先重写后端 API。
### 智慧表单填写
对 ERP、CRM、客服系统或申请流程来说，使用者常知道目标，却不想逐栏寻找栏位。Agent 可以把自然语言转成表单操作，尤其适合栏位多、流程长但规则相对清楚的内部系统。
### 无障碍与自然语言操作
官方 README 也列出 accessibility 作为使用案例。对部分使用者而言，以语音或自然语言描述「下一步要做什么」，可能比逐一定位网页元件更直观。但正式产品仍应搭配清楚的操作预览、确认机制与可复原设计。
## 六、模型与权限：最容易被忽略的工程问题
「把 Agent 放进网页」很方便，但也意味着模型呼叫与页面操作的边界更靠近使用者端。整合时至少要处理以下问题：
- **不要把高权限长期凭证直接硬编码在前端。** README 的范例使用的是示意值；正式环境应评估短效凭证、后端代理或受限权限。
- **将可操作范围限制在必要页面。** 不要让一般任务可以任意读取帐务、管理员设定或其他租户资料。
- **对不可逆动作加入确认。** 删除、付款、送出申请或修改权限前，应显示即将执行的动作并要求使用者确认。
- **保留操作纪录。** 需要知道 Agent 看到了什么、执行了什么、在哪一步失败，才能除错与稽核。
- **把页面内容视为不可信输入。** 网页中的文字、第三方内容与使用者可编辑栏位都可能影响模型判断，不能只依赖提示词要求 Agent 永远做对事。
这些并不是 Page Agent 特有的缺陷，而是所有会替使用者操作 UI 的 Agent 都必须面对的产品责任。
## 七、Page Agent 与浏览器自动化框架如何分工？
Page Agent 的官方定位是 client-side web enhancement，而不是 server-side automation。这句话很重要：它适合把智慧操作能力嵌入现有网页，不等于要取代 Playwright、Selenium 或完整的浏览器测试基础设施。
可以用下列方式分工：
- **产品内的自然语言操作：** 优先评估 Page Agent。
- **可重现的端对端测试：** 使用明确断言与固定流程的测试框架。
- **跨页面与浏览器外部控制：** 评估 Page Agent 的 Chrome Extension 或 MCP Server Beta，并重新检查权限。
- **大量背景任务与排程：** 使用后端工作伫列及 API；不要把前端 Agent 当成无限可靠的批次执行器。
换句话说，Page Agent 的价值不在于「所有自动化都改用 LLM」，而在于补上自然语言与现有 UI 之间的最后一哩。
## 八、导入前的实作检查清单
在正式接入前，可以先做一个最小垂直切片：
1. 选一个低风险、可复原的流程，例如查询资料或填写草稿。
1. 使用测试帐号与最小权限模型 endpoint。
1. 记录 Agent 可见的 DOM 范围与实际操作结果。
1. 测试页面改版、空资料、错误讯息与权限不足等情境。
1. 为高风险动作加入人工确认。
1. 比较自然语言操作与既有按钮流程的完成率、延迟及除错成本。
如果一个任务无法清楚定义「成功」，或失败后无法安全回复，就不应直接交给 Agent 全自动执行。
## 九、结语：把 Agent 放进 UI，不代表把控制权交出去
Page Agent 的想法很直接：把一个可配置 LLM、DOM 控制器与页面互动面板组合起来，让网页从被动介面变成可以理解自然语言的操作环境。它的技术亮点是轻量的 in-page JavaScript 整合、文字型 DOM 操作，以及对多种 LLM endpoint 的弹性。
但真正能否落地，关键不只是 Agent 能不能点到按钮，而是产品是否建立了权限隔离、操作确认、可观测性与失败复原。把 Page Agent 当成一个前端能力层，而不是无限制的自动化黑盒，才是比较务实的导入方式。
## 官方查证来源
- GitHub repository：[alibaba/page-agent](https://github.com/alibaba/page-agent)
- 官方文件与 Demo：[Page Agent documentation](https://alibaba.github.io/page-agent/)
- npm 套件：[page-agent](https://www.npmjs.com/package/page-agent)
- PageAgent 入口原始码：[packages/page-agent/src/PageAgent.ts](https://github.com/alibaba/page-agent/blob/main/packages/page-agent/src/PageAgent.ts)
- LLM 模组原始码：[packages/llms/src/index.ts](https://github.com/alibaba/page-agent/blob/main/packages/llms/src/index.ts)
查证时间：2026-09-17。本文的功能描述、安装方式与使用案例以官方 README、公开原始码及 GitHub repository metadata 为准；实际模型支援与 API 行为仍应以当前官方文件及版本为准。