Page Agent：用自然语言控制网页界面的 JavaScript 内页 GUI 智能体

Page Agent：用自然语言控制网页界面的 JavaScript 内页 GUI 智能体

📌 核心观点

Page Agent 是阿里巴巴开源的一款纯前端 JavaScript GUI 智能体，其核心理念是：无需浏览器扩展、无需 Python 后端、无需无头浏览器，只需在网页内嵌入一段 JS，即可通过自然语言指令控制网页界面。它将 AI Agent 的能力直接"活在"网页中，极大降低了 Web AI Copilot 的集成门槛。

🔑 关键信息

1. 项目基本信息

阿里巴巴（Alibaba）

2. 核心特性（Features）

3. 典型使用场景（Use Cases）

• SaaS AI Copilot：用少量代码为产品集成 AI 助手，无需重写后端
• 智能表单填写：将 20 步操作压缩为一句话指令，适合 ERP、CRM、管理后台
• 无障碍访问（Accessibility）：通过自然语言让任意 Web 应用支持语音控制
• 多页面 Agent：借助 Chrome 扩展跨标签页执行任务
• MCP 协议集成：允许外部 Agent 客户端通过 MCP 控制浏览器

4. 技术原理亮点

• 操作方式：文本化 DOM 解析，不依赖视觉截图，也不依赖多模态大模型
• 运行环境：浏览器客户端侧，而非服务端自动化（区别于 browser-use 等工具）
• 底层参考：基于 browser-use 的 DOM 处理组件和 Prompt 设计

💻 代码 / 示例

方式一：一行 CDN 引入（最快体验）

<!-- 全球 CDN -->
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js"></script>
<!-- 中国镜像 -->
<script src="https://registry.npmmirror.com/page-agent/1.10.0/files/dist/iife/page-agent.demo.js"></script>

⚠️ Demo CDN 使用免费测试 LLM API，仅用于技术评估，使用须同意相关条款。 可添加 ?autoInit=false 参数手动实例化：new window.PageAgent(...)

方式二：NPM 安装（生产推荐）

npm install page-agent

import { PageAgent } from 'page-agent'
const agent = new PageAgent({
  model: 'qwen3.5-plus',                                          // 指定 LLM 模型
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',  // 兼容 OpenAI 接口的模型服务地址
  apiKey: 'YOUR_API_KEY',                                         // 你的 API Key
  language: 'en-US',                                              // 交互语言
})
// 通过自然语言执行页面操作
await agent.execute('Click the login button')

💡 个人启发

1. "活在页面里"的 Agent 范式值得关注：大多数 Web 自动化工具（如 Playwright、Puppeteer）从外部控制浏览器，而 Page Agent 将 Agent 内嵌进页面本身，这种思路天然规避了跨域、权限等问题，更接近"用户视角"的操作。
2. 无截图 + 纯文本 DOM 是一个务实取舍：多模态方案成本高、延迟大，基于文本的 DOM 解析在大多数 Web 场景下足够用，这种"够用即可"的工程思维值得学习。
3. 低代码 AI Copilot 的商业价值极高：对于 SaaS 产品来说，用几行代码就能集成 AI 操作助手，这对中小团队尤其友好，未来这类"页面级 Agent SDK"可能成为标配。

🔭 延伸思考

1. 安全边界如何划定？ 页面内 JS Agent 拥有对当前页面 DOM 的完整操作权限，一旦注入恶意指令（Prompt Injection），可能触发危险操作（如提交表单、删除数据）。如何设计沙箱机制或操作白名单，是值得深入研究的安全课题。
2. Text-based DOM 解析的上限在哪里？ 对于高度动态化、Canvas 渲染或 WebGL 界面（如在线游戏、数据可视化大屏），纯文本 DOM 方案是否仍然适用？未来是否需要结合轻量级视觉能力做 Fallback？
3. 页面内 Agent 与服务端 Agent 的协作模式如何演进？ MCP Server 的加入暗示 Page Agent 正在向"端侧 + 云侧"协同方向扩展。未来页面内 Agent 能否成为大型 Agentic 工作流中的一个标准节点（Tool），与 LangChain、AutoGen 等框架深度集成？