各类 Agent 客户端持续爆火后，AI Agent 操控浏览器似乎已经成了一种范式：起一个后端服务，跑一个无头浏览器，截图、识别、点击。你的网页就是被操控的对象。作为 Web 开发者的我们，彻底的成了 Agent 时代的被动方。
作为前端开发者，我一直觉得这件事哪里不对。
不如换个方向：把 Agent 完整地放进网页里跑。
PageAgent 是一个纯前端的实验性 GUI Agent 库。它运行在你的页面中，直接操作界面。没有后端，没有截图，没有无头浏览器。还可以通过一个可选的插件控制整个浏览器。
⭐ GitHub｜MIT 开源
一行代码
- 传统方案的部署路径：安装 Python → 安装 Playwright → 跑一个 Docker → 启动一个无头浏览器 → 截图 → 调 LLM → 解析 → 执行。
- PageAgent 的部署路径：
<script src="CDN_TO/page-agent.demo.js"></script>→ Done. - 用 npm 接入同样简洁：
import {
PageAgent } from 'page-agent'
const agent = new PageAgent({
model: 'gpt-5.1',
baseURL: 'https://api.openai.com/v1',
apiKey: YOUR_KEY,
})
await agent.execute('帮我填写上周五的报销单')
更多接入方式见官方文档。
By Frontend, For Frontend
这个架构差异带来的不只是部署便利，而是角色反转。
Playwright、browser-use 这类工具的模式是 "外部控制" —— 你的应用是被操作的对象，你无法决定 Agent 看到什么、能做什么。实际上就是把你的产品暴露给了另一个自动化程序。
PageAgent 的模式是 "内部运行" —— Agent 是你应用的一部分，你决定它的能力边界、它看到的数据范围、它使用的模型。你的应用不是被人操控的木偶，而是自己拥有了 AI 能力。
这意味着什么？作为前端开发者，你可以：
- 在你的 SaaS 产品里内嵌一个 AI 助手，用户用自然语言完成复杂操作
- 给企业后台的 ERP/CRM 加上智能导航，代替 20 步点击流程
- 把 Agent 接到你现有的客服 bot 后面 —— 它不再是告诉用户 "点击右上角的提交按钮"，而是直接帮他点了
Human in the Loop
大多数 AI Agent 是 "fire-and-forget" —— 启动之后你就只能看着它跑，祈祷别出错。Human-in-the-Loop 是任何 AI 工具投入实际生产的必备能力。PageAgent 会展示自己的思考过程，遇到歧义主动询问用户。
兼容各种 LLM，可纯本地运行
OpenAI、Claude、DeepSeek、Qwen、Gemini、Grok，或者 Ollama 本地离线。PageAgent 本身不含后端服务（我为了各位方便技术测试提供了免费的测试 LLM 接口）。数据直接从页面发往你配置的 LLM 端点。MIT 协议，代码完全可审计。
不止于单页面
PageAgent 运行在页面内，对 SPA 来说是完美适配 —— Agent 拥有完整的应用状态和上下文。
但有些任务需要跨页面。一个可选的浏览器扩展为此提供了多标签页能力，需要用户主动授权。
是你的网页在驱动浏览器，你网页内的 Agent 可以将 PageAgentExt 作为一个 Tool 来控制用户的整个浏览器（需要用户显式授权）。
const result = await window.PAGE_AGENT_EXT.execute(
'在京东搜索"机械键盘"，对比前三个结果的价格和评价',
{
baseURL: 'https://api.openai.com/v1',
apiKey: YOUR_KEY,
model: 'gpt-5.1',
onStatusChange: (status) => updateUI(status),
}
)
因为 Agent 跑在用户的真实浏览器里，它天然处于用户的登录态。不需要共享密码，不需要管理 Cookie，不需要后端模拟登录。用户已经登录了 —— Agent 直接操作。
这打开了后端爬虫方案做不到的场景：
- 企业采购系统自动下单 —— 用户登录着供应商门户，Agent 直接走下单流程
- 企业差旅预订 —— 在公司的差旅系统里操作实际的预订流程，而不是去爬公开票价
- 项目管理自动化 —— 在团队的项目看板上直接创建任务，不需要 API 对接
模块化
我尽可能的做了拆分和模块化，你可以用零部件自由组合，拼装进你自己的 Agent 或者浏览器插件里。
立刻尝试🏃♂️
- 在线 Demo —— 无需注册，打开就能体验。也可以把 bookmarklet 拖到书签栏，在任意网站上试试。
- ⭐ GitHub —— MIT 开源，欢迎 Star 和 PR。
- 接入文档 —— CDN、npm、编程式接入指南。
PageAgent 基于 MIT 协议开源。Demo 站点提供的免费测试 API 仅供体验评估，生产环境请使用自己的 LLM API Key。使用条款
