Page-Agent 体验教程：用自然语言操控网页

什么是 Page-Agent？

Page-Agent 是阿里巴巴开源的一个前端 AI 代理库，被称为 "The GUI Agent Living in Your Webpage"（住在你网页里的 GUI 代理）。

简单来说，它能让任意网页拥有一个 AI 助手，用户用自然语言就能直接操作网页，无需浏览器扩展，无需 Python 环境，无需后端改造。

项目地址：https://gitcode.com/GitHub_Trending/pa/page-agent

核心特点

它能做什么？

• 为产品快速嵌入 AI 助手，无需重写后端
• 智能表单填写，把几十步点击变成一句话
• 无障碍访问，通过语音命令操控网页
• 跨页面任务执行

在线体验：个人任务管理器

我们准备了一个演示项目——个人任务看板，集成了 Page-Agent，你可以直接用自然语言来管理任务。

环境说明

项目已预装到 /home/atomgit/page-agent/ 目录下，包含一个自包含的 index.html 文件。

操作步骤

第一步：进入项目目录

cd /home/atomgit/page-agent/

第二步：后台启动服务

nohup python3 -m http.server 8080 > /dev/null 2>&1 &

第三步：获取访问地址

ID=$(jupyter notebook list | grep -oP 'online-action/\K[a-f0-9]+' | head -1)
echo "https://aihub-run.gitcode.com/online-action/${ID}/proxy/8080"

执行后会输出一个类似 https://aihub-run.gitcode.com/online-action/xxxxxxxx/proxy/8080 的地址。

第四步：浏览器打开

在浏览器中打开上一步得到的地址，即可看到任务看板页面。

演示：用自然语言操作任务看板

页面加载后，右下角会出现一个 🤖 浮动按钮，点击即可打开 Page-Agent 对话框。

试试这些指令

💡 技巧：指令中明确提到按钮文字或输入框标签效果最好。Page-Agent 通过 DOM 文本来理解页面，所以你看到的按钮上写什么，就说什么。

页面功能介绍

如何在你的项目中使用

1. 安装

npm install page-agent

2. 接入自己的大模型

import { PageAgent } from 'page-agent';

const agent = new PageAgent({
    model: 'deepseek-v4-flash',          // 模型名称
    baseURL: 'https://api.deepseek.com', // API 地址
    apiKey: 'your-api-key',              // 你的 API Key
    language: 'zh-CN',                   // 界面语言
});

// 用自然语言操控页面
await agent.execute('点击登录按钮');

Page-Agent 支持所有兼容 OpenAI 接口的大模型，包括 DeepSeek、通义千问、GLM 等。也可以接入本地部署的模型。

3. 更详细的配置

完整 API 文档、支持的模型列表、Chrome 扩展、MCP Server 等高级功能，请查阅官方文档：

官方文档：https://alibaba.github.io/page-agent/docs/introduction/overview

技术说明

• 本项目是一个纯前端静态页面，CSS 和 JS 全部内联到 index.html 中
• Page-Agent 通过 CDN 加载，无需安装任何依赖
• 使用 python3 -m http.server 或其他任意静态文件服务即可部署
• Page-Agent 会将页面 DOM 文本发送到后端 API 用于理解页面结构，请勿在包含敏感数据的页面上使用