一行代码把网页变成 AI Agent？

各类 Agent 客户端持续爆火后，AI Agent 操控浏览器似乎已经成了一种范式：起一个后端服务，跑一个无头浏览器，截图、识别、点击。你的网页就是被操控的对象。作为 Web 开发者的我们，彻底的成了 Agent 时代的被动方。

作为前端开发者，我一直觉得这件事哪里不对。

不如换个方向：把 Agent 完整地放进网页里跑。

PageAgent 是一个实验性的纯前端 GUI Agent 库。它运行在你的页面中，直接操作界面。无需后端，无需截图，无需无头浏览器。还可以通过一个可选的插件控制整个浏览器。

⭐ GitHub｜MIT 开源

一行代码

传统方案的部署路径是：安装 Python → 安装 Playwright → 跑一个 Docker → 启动一个无头浏览器 → 截图 → 调 LLM → 解析 → 执行。

PageAgent 的部署路径：

html 复制代码

<script src="https://registry.npmmirror.com/page-agent/1.4.0/files/dist/iife/page-agent.demo.js"></script>

Done.

用 npm 接入同样简洁：

typescript 复制代码

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 能力。

这意味着什么？作为前端开发者，你可以：

在你的 SaaS 产品里内嵌一个 AI 助手，用户用自然语言完成复杂操作
给企业后台的 ERP/CRM 加上智能导航，代替 20 步点击流程
把 Agent 接到你现有的客服 bot 后面 ------ 它不再是告诉用户 "点击右上角的提交按钮"，而是直接帮他点了

人机协作第一位

大多数 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 来控制用户的整个浏览器（需要用户显式授权）。

typescript 复制代码

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。使用条款