几行代码，让你的网页自己会干活

前言

你是否有过这样的感觉？

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

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

这就是阿里开源的 Page Agent。它是一个纯前端的实验性 GUI Agent 库，运行在你的页面中，直接操作界面。没有后端，没有截图，没有无头浏览器。MIT 开源。

角色反转

通过对比两个方案，能够得出来 Page Agent 特色

ㅤ	传统方案 (Playwright / Browser Use)	新方案 (Page Agent)
模式	外部控制	内部运行
你的角色	被操控的对象	Agent 的拥有者
数据流向	后端 → 截图 → LLM → 执行	页面 → LLM → 直接操作
能力边界	由第三方决定	由你定义
部署	需要后端、无头浏览器、Docker	纯前端，一行 CDN 引入
备注	这类工具的模式是"外部控制"—— 你的应用是被操作的对象，你无法决定 Agent 看到什么、能做什么。实际上就是把你的产品暴露给了另一个自动化程序。	Agent 是你应用的一部分，你决定它的能力边界、它看到的数据范围、它使用的模型。你的应用不是被人操控的木偶，而是自己拥有了 AI 能力。

接入有多简单？

我是这么在个人站点中接入的：


// 动态加载 Page Agent SDK
const script = document.createElement("script")
script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/page-agent.demo.js"
script.crossOrigin = "anonymous"
script.onload = async () => {
  const PageAgent = window.PageAgent
  new PageAgent({
    model: "qwen3.5-plus",
    baseURL: "https://page-ag-testing-ohftxirggb.cn-shanghai.fcapp.run",
    apiKey: "NA",
    language: "zh-CN",
  })
}
document.head.appendChild(script)

一句话总结：CDN 引入 → 初始化 → Done。

（其实官方提供了 npm 包，但是我不想增加站点体积，😁）

这就是我在个人站点 Header 里加的 Page Agent 按钮的效果：

点击之后，Page Agent 会在页面底部启动，你可以用自然语言指挥它。

它真的会在页面上操作，而不是只给你文字回复。

⚠️ 有一个问题要解决

上面的代码用的是阿里提供的测试接口 (apiKey: "NA")。如果你要正式用，必须换成自己的 API Key。

问题来了：API Key 会直接暴露在前端代码里。

解决方案是 self-host 一个中间服务，把前端请求转发到 LLM API（但是你的服务得有登录鉴权）：


前端 → 你的后端代理 → LLM API

这样：

前端只看到代理服务的地址，看不到真正的 API Key

你可以在代理层做限流、审计、缓存

阿里官方提供了一个免费的测试端点用于体验评估，生产环境建议自己部署。

当然 Page Agent 支持任何兼容 OpenAI API 的端点，Ollama 本地跑也行。

为什么我选择接进来？

数据不外发：Agent 运行在页面内，数据直接从页面发往你配置的 LLM 端点。不需要经过一个额外的后端服务。

天然登录态：因为 Agent 跑在用户的真实浏览器里，它天然处于用户的登录状态。不需要共享密码，不需要管理 Cookie，不需要后端模拟登录。

前端可控： 你决定 Agent 能做什么、不能做什么。能力边界由你定义。

技术尝鲜：喜欢啥都玩一下

能做什么？

在 SaaS 产品里内嵌一个 AI 助手，用户用自然语言完成复杂操作

给企业后台的 ERP / CRM 加上智能导航，代替 20 步点击流程

把 Agent 接到客服 bot 后面 —— 它不再是告诉用户"点击右上角的提交按钮"，而是直接帮他点了

结语

前端页面与其被人操控，不如自己拥有 AI 能力。