alibaba/page-agent：基于自然语言的网页界面GUI智能体

这是什么

PageAgent 是由阿里巴巴开源的一个基于 TypeScript 的 Web 端 GUI Agent（图形用户界面智能体）项目，目前在 GitHub 上已获得近 20,000 颗星。

与传统的浏览器自动化框架不同，PageAgent 的核心定位是“生活在网页中的智能体”。它通过在网页内部注入 JavaScript 代码，直接操作页面的 DOM 结构，让用户能够通过自然语言指令控制 Web 界面。该项目旨在降低 AI 在 Web 端落地的门槛，无需后端重写或复杂的浏览器扩展配置，即可实现智能化的页面交互。

解决的问题

PageAgent 主要解决了传统 Web 自动化和 AI 集成中的几个痛点：

1. 部署复杂度高：传统方案通常依赖 Selenium、Playwright 等无头浏览器（Headless Browser）或需要安装复杂的浏览器插件。PageAgent 仅需在页面中引入一段 JS 脚本即可运行，实现了“零配置”集成。
2. 多模态成本与延迟：许多基于视觉的 Agent 需要截取屏幕截图并发送给多模态大模型（Multimodal LLM），这不仅增加了 API 调用成本，还引入了图像处理的延迟。PageAgent 采用纯文本的 DOM 操作方式，避免了截图和多模态模型的依赖。
3. 权限与隐私顾虑：传统方案往往需要授予浏览器极高的权限（如访问所有数据、控制其他标签页等）。PageAgent 作为页面内脚本运行，权限边界更清晰，且不需要特殊的浏览器权限即可在单页内执行任务。
4. 开发集成门槛：对于 SaaS 产品而言，集成 AI Copilot 通常需要庞大的后端重构。PageAgent 允许开发者以极少的代码行数将 AI 能力嵌入现有产品，无需改动后端架构。

核心功能

• 基于文本的 DOM 操作： 系统解析页面的 DOM 树，将其转化为结构化的文本表示发送给 LLM。LLM 理解页面结构后，返回具体的 DOM 操作指令（如点击、输入、滚动），从而实现精准控制。整个过程不涉及图像识别。

• Bring Your Own LLM (BYOL)： 项目支持接入任意兼容 OpenAI 接口的 LLM。开发者可以自由配置 model、baseURL 和 apiKey。官方示例中展示了接入阿里云通义千问（Qwen）的配置方式，同时也支持其他主流模型。

• 快速集成模式： 提供极简的 CDN 引入方式，只需一行 <script> 标签即可启动演示版 Agent。对于生产环境，支持通过 npm install page-agent 安装，并通过 new PageAgent(...) 实例化，灵活控制初始化流程（如通过 autoInit=false 禁用自动启动）。

• 多页面与扩展支持： 虽然核心是单页应用，但项目提供了可选的 Chrome 扩展，用于支持跨标签页的多页面任务。此外，还内置了 MCP Server（Beta 版），允许外部客户端通过 Model Context Protocol 控制浏览器。

• 智能表单填充： 针对 ERP、CRM 和管理系统等复杂表单场景，PageAgent 能够将繁琐的多步点击工作流简化为一句自然语言指令，实现自动填充。

亮点 / 与同类相比

• 纯文本 vs 多模态视觉： 与 browser-use 等依赖截图和多模态模型的方案相比，PageAgent 的文本化 DOM 处理方式在速度、成本和隐私保护上具有显著优势。它不依赖昂贵的视觉模型，推理速度更快，且避免了图像中可能包含的敏感信息泄露风险。

• 客户端优先架构： 不同于 Puppeteer 或 Playwright 这类服务端控制的自动化框架，PageAgent 是纯客户端解决方案。这意味着它可以直接嵌入到任何 Web 应用中，作为前端功能的一部分运行，无需维护额外的自动化服务器集群。

• 无插件轻量级体验： 对于最终用户而言，无需安装任何浏览器扩展即可使用。对于开发者而言，无需配置复杂的无头浏览器环境，极大地简化了 CI/CD 和部署流程。

• 社区与生态： 项目基于 browser-use 的优秀工作构建，继承了其在 DOM 交互和提示词工程方面的积累，同时通过阿里巴巴的技术支持，在中文语境和国内大模型适配（如通义千问）上具有天然优势。

适合谁用 / 上手

适合人群：

• SaaS 产品开发者：希望在不重构后端的情况下，快速为产品添加 AI Copilot 功能，提升用户留存和效率。
• 内部工具管理员：需要自动化处理 ERP、CRM 等后台管理系统中的重复性表单填写和数据录入工作。
• 无障碍技术研究者：希望利用自然语言控制 Web 应用，为视障用户提供语音或文本驱动的无障碍访问方案。
• AI Agent 爱好者：希望探索基于 DOM 结构的轻量级 Web Agent 实现方案，并基于 MCP 协议构建外部控制工具。

上手指南：

1. 快速体验（Demo）： 在目标网页的控制台或 HTML 中引入官方提供的 CDN 脚本：

   <script src="{URL}" crossorigin="true"></script>
   

   即可自动启动演示 Agent。若需自定义，可添加 ?autoInit=false 参数。

2. 生产环境集成：

   • 安装依赖：npm install page-agent
   • 初始化 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: 'en-US',
     })
     await agent.execute('Click the login button')
     

3. 注意事项：

   • 官方提供的免费 Demo CDN 仅用于技术评估，生产环境建议使用自有 LLM API。
   • 项目明确声明其设计初衷是客户端 Web 增强，而非服务端自动化，因此不适用于需要跨域抓取或复杂服务端逻辑的场景。
   • 社区贡献需遵循规范，纯 AI 生成的代码若无实质人工参与将不被接受。