掌握自己熟知的   探索未来需要的
当前位置: 首页 >> 行业前沿 >> 一行代码,把网页变成 AI Agent

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

创建时间: 2026-03-21

hero.png

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

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

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

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

⭐ GitHub|MIT 开源

一行代码

zero-infra.png

  • 传统方案的部署路径:安装 Python → 安装 Playwright → 跑一个 Docker → 启动一个无头浏览器 → 截图 → 调 LLM → 解析 → 执行。
  • PageAgent 的部署路径 → 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

human-in-the-loop.png

大多数 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 拥有完整的应用状态和上下文。

但有些任务需要跨页面。一个可选的浏览器扩展为此提供了多标签页能力,需要用户主动授权。

extension-bridge.png

是你的网页在驱动浏览器,你网页内的 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 对接

模块化

architecture.png

我尽可能的做了拆分和模块化,你可以用零部件自由组合,拼装进你自己的 Agent 或者浏览器插件里。

立刻尝试

相关资讯
在线客服