一款来自阿里的非常有意思的项目这两天登上了Github热榜,项目名字叫 PageAgent
![图片[1]-Github 2w star,网页秒变 AI 助手!-酱豆博客](https://jamdou.com/wp-content/uploads/2026/07/2wstar网页秒变AI助手厉害了_3-1024x425.png)
以前我们搞 Web 自动化要么需要搭建 Python、无头浏览器等复杂环境,要么依赖截图 OCR 和多模态模型,操作很是麻烦,也很难嵌入现有产品做前端增强。
这个项目可以让网页直接拥有一个 AI Agent,通过自然语言就能控制网页界面完成各种操作。
![图片[2]-Github 2w star,网页秒变 AI 助手!-酱豆博客](https://jamdou.com/wp-content/uploads/2026/07/2wstar网页秒变AI助手厉害了_4.jpg)
项目简介
PageAgent 是一个纯前端的 JavaScript GUI 智能体框架,它的核心理念是 “The GUI Agent Living in Your Webpage” (住在你网页里的 GUI 智能体)。与传统的“外部控制”方案不同,PageAgent 直接在浏览器页面内运行,通过读取和操作 DOM 结构来理解和控制界面,无需截图、无需 OCR、无需多模态大模型。
![图片[3]-Github 2w star,网页秒变 AI 助手!-酱豆博客](https://jamdou.com/wp-content/uploads/2026/07/2wstar网页秒变AI助手厉害了_5-1024x470.jpg)
项目在 GitHub 上已经获得了 20k+ star 的高度认可,是当前 Web Agent 领域的热门开源项目。
![图片[4]-Github 2w star,网页秒变 AI 助手!-酱豆博客](https://jamdou.com/wp-content/uploads/2026/07/2wstar网页秒变AI助手厉害了_6-1024x503.png)
项目体验展示
为了让大家直观地感受 PageAgent 的功能,开源君通过 Page-Agent 官方 CDN 一行脚本的方式 ,接入了一个极简的演示页面。
页面只保留了登录表单和商品列表两个核心区块,结构清晰,便于 AI 理解。演示了以下两个典型场景:
场景1:自动填写表单
在交互面板中输入指令:“在登录表单中填写邮箱 demo@test.com,密码 123456,然后点击登录”。
PageAgent 会立刻解析 DOM 结构,精准定位到邮箱和密码的输入框,填入指定信息,并自动点击“登录”按钮。整个过程流畅自然,无需任何手动操作。
场景2:提取并分析商品信息
在交互面板中输入指令:“提取页面所有商品名称和价格,并找出页面中最便宜的商品”。
PageAgent 会自动扫描页面,从商品列表中提取出所有商品的名称和对应的价格信息,并进行计算比对,标记出价格最低的商品。
功能特性
- 纯前端实现: 无需后端部署,直接在浏览器中运行,支持 CDN 和 NPM 两种引入方式
- 无需截图: 基于 DOM 结构进行文本操作,速度快、成本低、准确性高
- 支持多模型: 兼容 OpenAI、Claude、DeepSeek、Qwen、Gemini 等多种主流大模型
- 人机协同: 提供交互式 UI 面板,支持 Human-in-the-loop,用户可实时查看和确认 AI 操作
- 隐私安全: 采用 BYOK(Bring Your Own Key)架构,数据只在浏览器和用户配置的 LLM 之间流动
- 多页面支持: 通过可选的 Chrome 扩展,支持跨标签页的复杂任务执行
![图片[5]-Github 2w star,网页秒变 AI 助手!-酱豆博客](https://jamdou.com/wp-content/uploads/2026/07/2wstar网页秒变AI助手厉害了_7-1024x634.jpg)
快速安装、使用
PageAgent 的使用也非常简单,官方提供了多种方式:
1.最快体验——Demo LLM
该方式通过官方Demo CDN接入,直接使用免费测试LLM API,零配置即可快速体验,适合技术评估,注意该接口有频率和提示词限制。
全球节点
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.5.2/dist/iife/page-agent.demo.js" crossorigin="true"></script>
国内节点
<script src="https://registry.npmmirror.com/page-agent/1.5.2/files/dist/iife/page-agent.demo.js" crossorigin="true"></script>
2.NPM安装
推荐实际项目开发使用该方式,可灵活配置自定义LLM服务,步骤如下:
- 安装依赖包
npm install page-agent
- 引入并初始化配置
import { PageAgent } from 'page-agent'// 初始化配置,推荐使用qwen3.5-plus,也可替换为其他兼容OpenAI接口的模型const agent = new PageAgent({ model: 'qwen3.5-plus', baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', apiKey: 'YOUR_API_KEY', // 替换为自己的LLM API密钥 language: 'zh-CN' // 配置使用语言})
- 启动并使用
// 方式1:程序化执行自然语言指令await agent.execute('点击登录按钮,然后将用户名填写为admin');// 方式2:展示交互面板,让用户手动输入指令agent.panel.show()
3.Chrome扩展
Chrome扩展为 可选依赖 ,不影响核心单页功能使用,安装后可实现跨Tab、多页面自动化操作,还能实现浏览器级的导航与控制
![图片[6]-Github 2w star,网页秒变 AI 助手!-酱豆博客](https://jamdou.com/wp-content/uploads/2026/07/2wstar网页秒变AI助手厉害了_8-1024x629.jpg)
Jamdou建议
Page-Agent 没有走传统 Web 自动化路线,而是直接把 AI Agent 放进网页本身,这样接入成本极低、运行效率更高、自动化稳定性更好,并且非技术用户也能使用。
开源君觉得,“网页内嵌 Agent”很可能会成为未来 Web 应用的重要方向。
更多细节功能,感兴趣的可以到项目地址查看:
https://github.com/alibaba/page-agent






暂无评论内容