阿里巴巴最近开源了一个有意思的项目:PageAgent,一个纯前端的网页 GUI Agent,可以用自然语言控制网页界面。它不像传统的自动化工具那样需要浏览器扩展、Python 脚本或后端服务,而是直接在页面内运行,几行代码就能集成。

项目概览

属性内容
GitHubalibaba/page-agent
Stars9,640
语言TypeScript
特点纯前端、自然语言控制、BYO-LLM
最后更新今天

它解决了什么问题

传统的网页自动化通常有几种方案:

  1. Selenium/Playwright:需要后端服务,依赖无头浏览器,部署成本高
  2. 浏览器扩展:需要用户安装,跨域限制多
  3. MCP Browser:同样需要服务端支持,配置复杂

PageAgent 走了一条不同的路:直接在页面内注入 JavaScript,利用 LLM 理解 DOM 结构并执行操作。这意味着:

  • 不需要服务器,纯客户端运行
  • 不需要浏览器扩展(虽然提供了可选的扩展用于跨页面任务)
  • 可以嵌入到任何现有产品中作为 AI Copilot

核心特性

1. 基于文本的 DOM 操作

PageAgent 不使用截图或多模态模型,而是通过文本方式处理 DOM。它会对页面元素进行标注,让 LLM 基于这些标注决定点击哪个元素、输入什么内容。

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('点击登录按钮,输入用户名 admin 和密码 123456')

2. 自带美观的 UI

除了底层 API,PageAgent 还提供了一个开箱即用的聊天界面,支持人机协作。用户可以看到 AI 的执行步骤,随时介入或纠正。

3. 支持多页面任务(可选)

虽然核心是单页面的,但通过配套的 Chrome 扩展,PageAgent 可以处理跨页面的工作流,比如搜索商品→打开详情→加入购物车→结算。

4. 可替换的 LLM

PageAgent 本身不绑定特定模型,你可以用 OpenAI、Anthropic、通义千问,甚至是本地模型。只要支持 OpenAI 兼容的 API 格式即可。

快速体验

最快的方式是通过 CDN 引入(注意:这仅用于技术评估,使用阿里提供的测试 LLM):

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

生产环境建议通过 npm 安装:

npm install page-agent

与同类工具对比

工具Stars架构特点
browser-use51kPython + 无头浏览器功能强大,但需要后端
Playwright MCP8kNode.js + 浏览器微软官方,稳定性高
PageAgent9.6k纯前端 JS无需后端,易于集成

如果你需要一个轻量级、易于嵌入产品的网页自动化方案,PageAgent 是一个值得考虑的选择。特别是对于 SaaS 产品想要快速添加 AI Copilot 功能的场景,几行代码就能实现。

适用场景

  • SaaS AI Copilot:在现有产品中快速添加 AI 助手,无需重构后端
  • 智能表单填写:将复杂的 20 步操作简化为一句话,适合 ERP、CRM、后台管理系统
  • 无障碍辅助:通过自然语言控制任何网页应用,支持语音命令、屏幕阅读器
  • 自动化测试:结合 LLM 理解能力,编写更易维护的 UI 测试

注意事项

  • CSP(内容安全策略)严格的网站(如 GitHub)可能需要使用浏览器扩展版本
  • 目前不支持 Shadow DOM 内部元素的交互
  • 需要自备 LLM API Key,免费演示版仅供评估使用

项目信息

属性内容
仓库https://github.com/alibaba/page-agent
许可证MIT
语言TypeScript
维护者@alibaba

项目还在快速迭代中,今天还有代码提交。如果你对这个方向感兴趣,可以去 GitHub 点个 Star 关注后续发展。