阿里巴巴 Page-Agent：网页端 AI Agent 开发指南
2026-03-06 2026年03月 阿里巴巴-Page-Agent-网页端AI-Agent.md

阿里巴巴 Page-Agent：网页端 AI Agent 开发指南

阿里开源的网页端 AI Agent 工具，让任何网页都能用自然语言控制

项目简介

Page-Agent 是阿里巴巴开源的 JavaScript AI Agent 库，专注于客户端网页增强。它的核心特点是：无需浏览器扩展、无需 Python 后端、无需无头浏览器，只需在前端页面引入一段 JavaScript，就能让 AI 控制网页界面。

<!-- 一行代码接入 -->
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.5.1/dist/iife/page-agent.demo.js"></script>

核心特性

特性 说明
🧠 自然语言控制 用文字描述操作，AI 自动执行
📝 基于 DOM 操作 不需要截图/OCR，直接操作 DOM 元素
🔌 自带 LLM 支持接入各种 LLM（阿里云 qwen、OpenAI 等）
🎨 人机协作 支持确认步骤，避免误操作
🐙 Chrome 扩展 可选扩展支持多页面任务

技术架构

基于 browser-use

Page-Agent 的 DOM 处理组件和 prompt 源自 browser-use 项目，但将其改造为纯前端版本。

browser-use (服务端自动化) → Page-Agent (客户端网页增强)

核心技术栈

  • 语言: TypeScript
  • 运行环境: 浏览器端 JavaScript
  • 依赖: browser-use 的 DOM 解析逻辑

快速开始

方式一：CDN 快速体验（仅限技术评估）

<!DOCTYPE html>
<html>
<head>
  <title>Page Agent Demo</title>
</head>
<body>
  <!-- 引入 Page Agent -->
  <script src="https://cdn.jsdelivr.net/npm/page-agent@1.5.1/dist/iife/page-agent.demo.js"></script>

  <!-- 你的网页内容 -->
  <button id="login-btn">登录</button>
  <input id="username" placeholder="用户名">
  <input id="password" type="password" placeholder="密码">

  <script>
    // 初始化 Agent
    const agent = new PageAgent({
      language: 'zh-CN',
    });

    // 执行自然语言指令
    await agent.execute('点击登录按钮');
  </script>
</body>
</html>

方式二：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: process.env.DASHSCOPE_API_KEY,
  language: 'zh-CN',
});

// 执行操作
await agent.execute('在搜索框输入 "人工智能"，然后点击搜索按钮');

核心 API

PageAgent 构造函数

interface PageAgentOptions {
  model: string;           // LLM 模型名称
  baseURL: string;         // LLM API 地址
  apiKey: string;          // API 密钥
  language?: string;       // 语言设置 (默认 'en-US')
  theme?: 'light' | 'dark' | 'auto';  // UI 主题
  humanInTheLoop?: boolean; // 是否需要人工确认
}

execute() 方法

// 执行自然语言指令
await agent.execute('点击登录按钮');
await agent.execute('填写表单：姓名张三，手机13800138000');
await agent.execute('滚动页面到底部');

更多 API

方法 说明
execute(action) 执行自然语言操作
pause() 暂停执行
resume() 恢复执行
stop() 停止执行
getState() 获取当前页面状态

实际应用场景

场景一：智能填表

// 用户说一句话，AI 自动填完复杂表单
await agent.execute(`
  在会员注册表单中填写：
  - 姓名：张三
  - 性别：男
  - 手机：13800138000
  - 邮箱：zhangsan@example.com
  - 地址：北京市朝阳区xx街道
`);

工作原理：
1. AI 解析自然语言中的关键信息
2. 识别网页中的表单字段
3. 自动填充到对应位置

场景二：语音填表（结合灵听）

// 1. 语音输入转文字（灵听）
const voiceText = await listen(); // "帮我填写联系人表单，张三，男，手机13800138000"

// 2. Page-Agent 执行填表
await agent.execute(`填写联系人表单：${voiceText}`);

场景三：AI Copilot

// 为 SaaS 产品添加 AI 助手
const agent = new PageAgent({
  model: 'qwen3.5-plus',
  // ...
});

// 用户交互
const userInput = prompt('请告诉 AI 您要做什么：');
await agent.execute(userInput);

场景四：无障碍访问

// 语音控制网页
await agent.execute('点击第一个商品');
await agent.execute('关闭弹窗');
await agent.execute('滚动到评论区');

与灵听项目的对比

特性 Page-Agent 灵听（语音输入法）
输入方式 自然语言指令 语音 → 文字
执行方式 AI 自动操作 DOM 用户手动确认后输入
适用场景 自动化操作 文本辅助输入
互补性 可结合灵听语音输入 可结合 Page-Agent 执行

集成示例：语音填表完整流程

// 完整流程：语音输入 → AI 理解 → 自动填表

// 步骤1：语音识别（灵听）
const voiceText = await listen(); 
// 例如："填写客户表单，李四，女，手机13900001111，邮箱li@si.com"

// 步骤2：让 Page-Agent 执行
const agent = new PageAgent({
  model: 'qwen3.5-plus',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  apiKey: 'YOUR_API_KEY',
});

await agent.execute(`在客户表单中填写：${voiceText}`);

部署方式

客户端嵌入

<script src="https://cdn.jsdelivr.net/npm/page-agent@1.5.1/dist/iife/page-agent.min.js"></script>

自建部署

# 克隆项目
git clone https://github.com/alibaba/page-agent.git
cd page-agent

# 安装依赖
npm install

# 构建
npm run build

注意事项

  1. 安全性：生产环境建议使用自己的 LLM API
  2. 隐私：Demo CDN 仅供技术评估使用
  3. 权限：操作需要页面有相应权限

相关资源

  • GitHub: https://github.com/alibaba/page-agent
  • 官网 Demo: https://alibaba.github.io/page-agent/
  • 文档: https://alibaba.github.io/page-agent/docs/introduction/overview

整理自阿里巴巴 page-agent 项目官方文档