
各类 Agent 客户端持续爆火后,AI Agent 操控浏览器似乎已经成了一种范式:起一个后端服务,跑一个无头浏览器,截图、识别、点击。你的网页就是被操控的对象。作为 Web 开发者的我们,彻底的成了 Agent 时代的被动方。
作为前端开发者,我一直觉得这件事哪里不对。
不如换个方向:把 Agent 完整地放进网页里跑。
PageAgent 是一个纯前端的实验性 GUI Agent 库。它运行在你的页面中,直接操作界面。没有后端,没有截图,没有无头浏览器。还可以通过一个可选的插件控制整个浏览器。
⭐ GitHub|MIT 开源

→ Done.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('帮我填写上周五的报销单')
更多接入方式见官方文档。
这个架构差异带来的不只是部署便利,而是角色反转。
Playwright、browser-use 这类工具的模式是 "外部控制" —— 你的应用是被操作的对象,你无法决定 Agent 看到什么、能做什么。实际上就是把你的产品暴露给了另一个自动化程序。
PageAgent 的模式是 "内部运行" —— Agent 是你应用的一部分,你决定它的能力边界、它看到的数据范围、它使用的模型。你的应用不是被人操控的木偶,而是自己拥有了 AI 能力。
这意味着什么?作为前端开发者,你可以:

大多数 AI Agent 是 "fire-and-forget" —— 启动之后你就只能看着它跑,祈祷别出错。Human-in-the-Loop 是任何 AI 工具投入实际生产的必备能力。PageAgent 会展示自己的思考过程,遇到歧义主动询问用户。
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 或者浏览器插件里。