Alibaba Page Agent

1. 项目概览

2. 一句话解释

Page Agent 可以理解为“嵌入你网页里的 AI 操作员”：开发者在网页里引入一段 JS 或 npm 包，配置支持 tool call 的 LLM 后，用户就可以输入“帮我打开设置并修改通知方式”“填写这张报销单”“搜索某个订单并导出结果”等自然语言指令，由 Agent 读取页面 DOM、规划动作并完成点击、输入、选择、滚动等操作。

它与传统浏览器自动化工具的区别在于：

3. 关键截图

Demo 首页

这张图适合放在售前材料里说明 Page Agent 的产品感知：用户在当前网页中输入自然语言任务，页面内 Agent 帮用户完成操作。截图中也能直接看到官方强调的卖点：纯前端方案、支持私有模型、无需脱敏、MIT 开源。

Chrome 扩展能力

Chrome Extension 是可选增强能力。PageAgent.js 本身负责页面内自动化；扩展额外提供多页面任务、浏览器级控制，以及从浏览器外部发起任务的能力。

模型配置与支持

官方文档强调支持符合 OpenAI API 规范且支持 tool call 的模型，包含公有云和本地/私有部署路径。售前沟通时要注意：模型是否支持稳定 tool call、上下文长度是否足够、是否需要企业侧代理转发 LLM 请求，会直接影响落地效果。

4. 它主要能做什么

5. 典型适用场景

6. 不太适合的场景

7. 架构和组件理解

官方开发指南显示 Page Agent 是 npm workspaces monorepo，核心包可以这样理解：

简化工作流

扩展与 MCP 的关系

售前解释时可以这样讲：基础版是在客户自己的 Web 应用里嵌一个页面内 AI 操作员；如果要跨页面、跨标签或让外部 Agent 控制浏览器，就需要引入 Chrome Extension 和 MCP Server。

8. 怎么用

方式一：Demo CDN 快速体验

官方提供一行脚本方式用于技术评估：

中国镜像：

注意：官方 Demo CDN 使用免费测试 LLM API，仅适合技术评估和研发测试，不应直接用于生产环境，也不应输入个人身份信息或敏感数据。

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

方式三：生产环境建议

如果要集成到企业 Web 应用，官方文档建议不要把真实 LLM API Key 放到前端代码中，更合理的方式是由企业后端代理转发 LLM 请求，并在代理层做鉴权、审计、限流、脱敏和模型路由。

const agent = new PageAgent({
  baseURL: '/api/llm-proxy',
  model: 'gpt-5.1',
  customFetch: (url, init) =>
    fetch(url, { ...init, credentials: 'include' }),
})

方式四：MCP Server Beta

如果客户已有本地 Agent 客户端，可以通过 @page-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"
      }
    }
  }
}

官方说明 MCP Server 仍是 Beta，售前演示可以用，但生产落地要特别关注安全授权、稳定性和版本兼容。

9. 售前可以怎么讲

面向业务方

面向技术方

10. PoC 建议

推荐 PoC 目标

选择一个客户熟悉、痛点明确、风险可控的流程，例如：

PoC 范围控制

验收指标示例

11. 风险和注意事项

12. 与相关方案的关系

13. 我的售前判断

Page Agent 的价值在于它把“AI 问答”往“AI 可执行操作”推进了一步，尤其适合 B 端 Web 系统。很多企业系统的问题不是没有功能，而是功能太多、路径太深、用户不知道怎么用。Page Agent 的页面内嵌模式非常适合把复杂操作包装成自然语言入口，用较低改造成本验证 AI Copilot 的实际价值。

它最适合的售前切入点不是“全自动替代人工”，而是“辅助用户完成复杂页面操作”。在方案表达上，应强调可控、可审计、可确认、可接管。对客户承诺时也要明确边界：它不擅长视觉识别，不适合大规模服务端爬虫，不适合无防护地执行高风险动作。

建议售前 Demo 选择一个客户熟悉的高频流程，例如“创建客户资料”“提交报销单”“配置产品参数”“搜索订单并生成报告”。演示时先让用户看到自然语言入口，再展示 Agent 如何理解页面、逐步操作、必要时请用户确认。这样比单纯讲技术架构更容易让业务方理解价值。

14. 可复用客户 Q&A

15. 后续跟进建议

1. 选一个客户真实流程做 1-2 周 PoC，优先表单密集、高频重复、风险可控的页面。
2. 梳理页面 DOM 和可访问性质量，补充按钮文本、表单 label、ARIA 属性。
3. 确定模型路线：公有云、百炼 Qwen、OpenAI-compatible 网关、本地 Ollama/LM Studio 或客户已有模型平台。
4. 设计安全策略：后端代理、数据脱敏、操作白名单、二次确认、审计日志、异常接管。
5. 若涉及跨页面或外部 Agent 平台，再评估 Chrome Extension 和 MCP Server。

16. 参考资料

• GitHub 仓库：alibaba/page-agent
• Page Agent 官方 Demo
• 官方文档：Overview
• 官方文档：Quick Start
• 官方文档：Limitations
• 官方文档：Chrome Extension
• 官方文档：MCP Server Beta
• 官方文档：Models
• npm：page-agent
• Release v1.10.0
• Terms and Privacy