PageAgent

TL;DR

PageAgent 是阿里巴巴开源的一款纯前端 JavaScript GUI Agent 框架，核心理念是 "The GUI Agent Living in Your Webpage"——让 AI 直接「住进」你的网页。与传统浏览器自动化工具不同，它不依赖截图、多模态模型、无头浏览器或 Python 后端，仅需一行 <script> 标签即可嵌入任意页面，让用户通过自然语言指令操控 Web 界面。

核心差异点：MIT 协议 + 纯 TypeScript + DOM 脱水（文本化 DOM 分析） + 任意 LLM 接入（BYOK） + 零后端部署 + Human-in-the-Loop 协同面板 + 可选 Chrome 扩展跨标签页 + MCP Server Beta。

适合：想为自己的 Web 应用添加 AI Copilot 的 SaaS 团队；需要自然语言操作后台管理系统的场景；希望用 AI 增强无障碍体验的开发者；需要将客服机器人从「指导操作」升级为「直接操作」的产品团队。不适合：需要大规模跨网站爬取/数据采集；需要 CI/CD 自动化测试；需要无代码方案的非技术人员。

核心能力

• DOM 脱水（DOM Dehydration）：将页面 DOM 树压缩为精简文本，仅保留交互元素及其索引，发送给 LLM 处理。无需截图、无需多模态模型
• 零后端部署：CDN 或 NPM 导入，一行 <script> 标签即可运行
• 任意 LLM 接入：支持 OpenAI / Claude / Qwen / DeepSeek / Gemini 等任意兼容 /chat/completions 接口的模型
• Human-in-the-Loop：侧边面板实时展示 AI 思考过程，遇到歧义时主动向用户确认
• 操作白名单 & 数据脱敏：可定义允许的操作范围，保护敏感字段不被 AI 看到
• 自定义知识注入：注入业务规则，让 AI 遵守特定的操作约束与流程
• Chrome 扩展（可选）：跨标签页/多页面任务支持
• MCP Server（Beta）：外部 Agent 客户端可通过 MCP 协议控制浏览器
• ReAct 循环架构：Observe → Think（反思 + 行动）→ Act 的完整实现
• Reflection-Before-Action：每步先评估上步效果再决策，减少错误累积
• TypeScript 编写：完整类型定义，适合前端工程集成

价格

• Free / OSS：$0；MIT 协议
• 真实成本 = LLM API（GPT-4o ~$5/M input + $15/M output / Qwen3.5-plus 更便宜）
• 支持通过 Ollama 运行本地模型，API 成本为 $0

实测（开发者 / 前端集成 / SaaS 场景）

亮点：

• 18,000+ GitHub stars，社区活跃度高
• 阿里巴巴团队维护，代码质量有保障
• DOM 脱水技术让 Token 成本比截图方案低一个数量级
• 推理速度快（0.5-1s vs 截图方案的 2-5s）
• 天然继承用户登录态，无需处理 Cookie/Session 同步
• 零后端部署，适合前端团队独立完成
• 中文支持完美（阿里巴巴出品）
• 操作白名单 + 数据脱敏 + Human-in-the-Loop 三重安全机制
• MCP Server 打通 Claude Desktop / Cursor 生态

踩坑：

• 项目 v1.8.x 仍在快速迭代，API 可能变化
• 复杂动态页面 DOM 分析精度取决于 LLM 能力
• 不支持跨网站操作（除非安装 Chrome 扩展）
• 不适合大规模爬虫和性能测试场景
• 生产环境需要自行处理 LLM 调用错误和重试
• 文档有中英文版本，部分内容可能滞后
• 非前端开发者需要一定的 JavaScript 能力

上手

快速体验（一行 CDN 脚本）

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

加载后页面右下角出现 Agent 面板，可以直接输入自然语言命令。

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',
})

// 执行自然语言任务
const result = await agent.execute('点击登录按钮，然后填写用户名为 test@example.com')
console.log(result.success, result.message)

使用 Core 包（无 UI 面板，嵌入式场景）

npm install @page-agent/core

import { PageAgentCore } from '@page-agent/core'
import { PageController } from '@page-agent/page-controller'

const pageController = new PageController()
const agent = new PageAgentCore({
  pageController,
  llmConfig: {
    model: 'gpt-4o',
    baseURL: 'https://api.openai.com/v1',
    apiKey: 'YOUR_API_KEY',
  },
})

await agent.execute('帮我创建一个新项目，名称为「AI Demo」')

对比

适合 / 不适合

• ✅ 想为 Web 应用添加 AI Copilot 的 SaaS 团队
• ✅ 需要自然语言操作后台管理系统的场景
• ✅ 用 AI 增强无障碍体验（语音控制、屏幕阅读器）
• ✅ 将客服机器人从「指导操作」升级为「直接操作」
• ✅ 前端开发者想用最低成本集成 AI 能力
• ✅ 中国大陆开发者（阿里巴巴出品，中文支持完美）
• ❌ 大规模跨网站爬取 / 数据采集
• ❌ CI/CD 自动化测试（用 Playwright）
• ❌ 无代码方案的非技术人员
• ❌ 需要高并发稳定性的生产级自动化

相关阅读

• OpenManus 评测
• Composio 评测

来源

1. PageAgent 官方文档 https://alibaba.github.io/page-agent/
2. PageAgent GitHub 主仓库 https://github.com/alibaba/page-agent
3. PageAgent 官网 https://pageagent.net/