23.9K Star！这个开源项目把网页变成 AI Agent，无需截图、无需插件、无需后端

📅 2026-07-09 13:50:07
\n
当下，让 Agent 自动操作浏览器主流路径，依然是：
截图 → 多模态  LLM 识别页面元素 → 执行操作。
路虽能跑通，但代价却有点大：
多模态 LLM 成本太高。
需要在服务器端或无头浏览器里运行，过于复杂。
而今天介绍的开源项目：Page Agent，和它们不一样。
它把 Agent 嵌进网页里：
用户用自然语言下指令，Agent 在当前页面的 DOM 上解析意图并执行点击、输入等操作。
图片
01 项目介绍
Page Agent 是一个纯 JavaScript 的页面内 GUI Agent。
定位在 README.md 写的很明确：
  •  
The GUI Agent Living in Your Webpage. Control web interfaces with natural language.
让 AI 住进网页里，使用自然语言直接控制界面。
项目致谢了 browser-use，但两者定位完全不同：
browser-use 是服务端的通用浏览器自动化引擎。
而 Page Agent 的定位则是它的客户端版本。
图片
02 项目亮点
1.极简接入：
传统自动化方案往往需要准备 Python 环境、浏览器驱动等复杂依赖。
而 Page Agent 只需一行 script 标签即可快速体验：
  •  
  •  
  •  
  •  
src="https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js" crossorigin="true">
2.纯文本 DOM 操控：
Page Agent 直接读取和操作页面 DOM 结构：
将 DOM 转化为结构化文本后提交给 LLM。
由 LLM 规划操作步骤，再通过内置执行器完成点击、输入等动作。
速度快，成本低，而且准确性高。
3.开放的模型生态：
Page Agent采用 BYO LLM（自带大模型）架构。
支持接入所有兼容 OpenAI API 格式的模型，包括:
OpenAI、Claude Code、通义千问、豆包、DeepSeek 等。
也可对接本地 Ollama 模型实现离线运行。
4.跨页面能力：Chrome 扩展 + MCP：
（1）Chrome 扩展（适合跨标签页任务）：
Page Agent 默认仅支持单页面操作。
但通过可选的 Chrome 扩展实现跨标签页、多页面控制，拓展操作范围。
适合从 A 页面抓数据，填到 B 页面这类需要跨页面的工作流。
（2）MCP Server（Beta）：
让外部 Agent （如 Claude Code）远程控制浏览器。
适合需要把浏览器控制能力接入更大 Agent 工作流的场景。
5.隐私安全：
Page Agent 全程在浏览器内运行，数据不经过第三方服务器。
API Key 存储在浏览器本地，不同步至外部。
已关注
关注
重播 分享 赞
 
繁星AI随笔
 
 
 

 

 

0/0

00:00/00:18
 
 
进度条，百分之0
 
 
00:00
/
00:18
00:18
倍速
全屏

 

倍速播放中
 
 

继续观看

23.9K Star！这个开源项目把网页变成 AI Agent，无需截图、无需插件、无需后端

 
转载
,
23.9K Star！这个开源项目把网页变成 AI Agent，无需截图、无需插件、无需后端
繁星AI随笔
已同步到看一看写下你的评论
 

 

 
 
视频详情
03 快速入门
1.极简体验（仅评估）：
  •  
  •  
  •  
  •  
src="https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js" crossorigin="true">
加载后页面右下角出现 Agent 面板，可以直接输入自然语言命令。
2.NPM 安装：
（1）安装依赖：
  •  
npm install page-agent
（2）初始化 Agent：
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
import { PageAgent } from 'page-agent'
const agent = new PageAgent({    model: 'qwen3.5-plus',    baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',    apiKey: 'YOUR_API_KEY',    language: 'zh-CN',})
（3）执行自然语言命令：
  •  
await agent.execute('帮我填写上报销单，金额 xxx，类别为 xxx')
04 适用场景
1.SaaS 产品 AI Copilot：
在你自己的产品里嵌入 AI 助手，几行代码实现，不需要后端改动。
2.智能表单填写：
ERP、CRM、后台管理系统里的 20 步操作压缩成一句话。
3.无障碍增强：
为任意 Web 应用添加自然语言操作能力，语音命令、屏幕阅读器场景。
4.跨标签页 Agent：
配合 Chrome 扩展，Agent 可以跨页面工作。
5.MCP 控制：
通过 MCP Server（Beta）让外部 Agent 客户端控制浏览器。
05 结语
Page Agent的价值在于：
它把 前端原生、自然交互、零基建 作为核心，让 AI 真正融入网页。
  •  
开源地址：https://github.com/alibaba/page-agent
我是繁星，关注我，获取更多好玩有趣的开源仓库！
谢谢你阅读我的文章~
我们下期再见！

 

💬 讨论区

暂无评论，快来发表第一条评论吧！

📮 需求咨询