Github 2w star,网页秒变 AI 助手!

Github 2w star,网页秒变 AI 助手!

一款来自阿里的非常有意思的项目这两天登上了Github热榜,项目名字叫 PageAgent

图片[1]-Github 2w star,网页秒变 AI 助手!-酱豆博客

以前我们搞 Web 自动化要么需要搭建 Python、无头浏览器等复杂环境,要么依赖截图 OCR 和多模态模型,操作很是麻烦,也很难嵌入现有产品做前端增强。

这个项目可以让网页直接拥有一个 AI Agent,通过自然语言就能控制网页界面完成各种操作。

图片[2]-Github 2w star,网页秒变 AI 助手!-酱豆博客

项目简介

PageAgent 是一个纯前端的 JavaScript GUI 智能体框架,它的核心理念是 “The GUI Agent Living in Your Webpage” (住在你网页里的 GUI 智能体)。与传统的“外部控制”方案不同,PageAgent 直接在浏览器页面内运行,通过读取和操作 DOM 结构来理解和控制界面,无需截图、无需 OCR、无需多模态大模型。

图片[3]-Github 2w star,网页秒变 AI 助手!-酱豆博客

项目在 GitHub 上已经获得了 20k+ star 的高度认可,是当前 Web Agent 领域的热门开源项目。

图片[4]-Github 2w star,网页秒变 AI 助手!-酱豆博客

项目体验展示

为了让大家直观地感受 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 助手!-酱豆博客

快速安装、使用

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服务,步骤如下:

  1. 安装依赖包
npm install page-agent
  1. 引入并初始化配置
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. 启动并使用
// 方式1:程序化执行自然语言指令await agent.execute('点击登录按钮,然后将用户名填写为admin');// 方式2:展示交互面板,让用户手动输入指令agent.panel.show()

3.Chrome扩展

Chrome扩展为 可选依赖 ,不影响核心单页功能使用,安装后可实现跨Tab、多页面自动化操作,还能实现浏览器级的导航与控制

图片[6]-Github 2w star,网页秒变 AI 助手!-酱豆博客

Jamdou建议

Page-Agent 没有走传统 Web 自动化路线,而是直接把 AI Agent 放进网页本身,这样接入成本极低、运行效率更高、自动化稳定性更好,并且非技术用户也能使用。

开源君觉得,“网页内嵌 Agent”很可能会成为未来 Web 应用的重要方向。

更多细节功能,感兴趣的可以到项目地址查看:

https://github.com/alibaba/page-agent
© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容