Posted on

Page-Agent 是阿里巴巴开源的一个纯前端 JavaScript 库，它能将任何一个网页变成一个可以通过自然语言来控制的 AI 智能体（Agent）。

🤔 这是什么意思？

简单来说，它就是住在你网页里的一个AI操作员。你只需要告诉它“点击登录按钮”或“把截止日期改到下周五”，它就能理解并自动完成操作。

这与传统的浏览器自动化工具（如 Selenium）有本质区别：

  • 传统工具：像从外部控制浏览器，需要编写脚本，依赖Python环境或浏览器驱动。
  • Page-Agent：直接在网页内部运行，纯前端，零后端依赖。它通过分析页面的DOM结构（而非截图）来理解界面，因此反应更快、成本也更低。

✨ 如何使用？

Page-Agent 的接入方式非常灵活，主要有两种：

1. 极速体验（Demo模式）
只需在网页的 HTML 里引入一行脚本，页面右下角就会立即出现一个AI对话框。这种方式使用的是阿里提供的免费测试大模型API，适合快速评估效果。

1
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/page-agent.demo.js" crossorigin="true"></script>

2. 正式集成（NPM安装）
在项目中通过 npm 安装，并配置你自己的大模型 API Key。这种方式更稳定，适合生产环境，并且支持市面上几乎所有主流模型。

1
2
3
4
5
6
7
8
9
10
11
import { PageAgent } from 'page-agent'

const agent = new PageAgent({
    model: 'gpt-4o-mini', // 也可以是 deepseek, qwen-plus 等
    baseURL: 'https://api.openai.com/v1', // 你的模型API地址
    apiKey: 'YOUR_API_KEY',
    language: 'zh-CN', // 界面语言
})

// 用自然语言下达指令
await agent.execute('帮我填写上周五的报销单')

💡 它最适合做什么？

它的核心价值在于为现有的网页应用**“零成本”增加AI Copilot能力**，尤其适用于：

  • 复杂后台的智能表单填充：对于拥有几十个字段的ERP或CRM系统，用户可以直接说“把客户名字改成张三”，Agent会自动定位并填写。
  • 提升网站无障碍体验：用户可以通过语音指令来操作网页，极大降低了使用门槛。
  • 自动化测试与引导：测试人员可以用自然语言编写自动化测试脚本；产品或运营可以用它来创建交互式的用户引导流程。

⚠️ 注意事项与限制

作为一个还在快速迭代的开源项目，它也有一些局限性：

  • 长链路任务不够稳定：对于超过10个步骤的复杂操作，中途出错概率会增高，建议拆分成多个短指令执行。
  • 跨页面能力受限：核心库只能操作当前页面。如果需要跨标签页操作（例如“从A页面复制数据填到B页面”），需要额外安装官方的 Chrome 扩展。
  • 无法处理图形内容：由于它基于DOM文本分析，无法识别Canvas、WebGL画布或图片内的元素。

如果你想在你的SaaS产品中快速集成AI助手，或者为内部管理系统增加智能交互能力，Page-Agent 是一个非常值得尝试的轻量级方案。