GitHub测评：Page Agent —— 用自然语言操控网页，技术向玩具还是真实需求？

age Agent 是阿里开源的一个纯前端 AI 控制框架，让你只需往页面里插一段 <script> 标签，就能用自然语言（比如“点击登录按钮”“帮我填完这个表单”）来操作页面上的 UI 元素。它不依赖浏览器插件、不需要 Python 或无头浏览器，所有逻辑都跑在页面里的 JavaScript 里，基于 DOM 文本分析而非截图，因此不强制要求多模态大模型。
项目本身质量不错，但说实话——大多数个人站长根本用不上这玩意。它更适合 SaaS 产品、企业 ERP/CRM 这类有大量重复操作流程的场景。对于自己折腾的博客或小工具站，引入一个 AI 控制层既没必要也略显杀鸡用牛刀。不过作为技术向玩具，在自己的页面上跑一跑还是挺有意思的。

项目信息

| 项目 | 内容 |

|——|——|

|仓库地址| https://github.com/alibaba/page-agent |

|Star数量| 14.3k（2026-03-28） |

|协议| MIT |

|官方文档| https://alibaba.github.io/page-agent/ |

适合场景

SaaS产品内嵌AI助手：给自己开发的SaaS系统加一个AI副驾」，让用户说话就能完成操作，省去繁琐的多步点击。
企业内部系统提效：ERP、CRM、OA 这类操作步骤多、界面复杂的系统，用 Page Agent 可以把「20 次点击」压缩成一句话。
无障碍辅助：让残障用户用语音/文字指令操控原本需要精确鼠标操作的网页。
跨标签页多页面任务：配合官方提供的 Chrome 插件（Beta），可以跨页面执行连续任务。
MCP接入：项目提供了 MCP Server（Beta），可以让外部 Agent 客户端（比如 Claude Desktop、Cursor）通过协议遥控浏览器。

不适合的场景：

个人博客 / 展示站：访客通常不需要 AI 帮他们点链接，多此一举。
轻量工具站：引入一个依赖大模型 API 的控制层，成本和复杂度远超收益。
服务端自动化 / 爬虫：它是纯客户端方案，这条路走错了。

快速接入

方案一：一行代码体验（使用官方免费测试 API）

直接往页面 <head> 或 <body>里贴一行脚本，项目自带免费的测试用 LLM，零配置可玩：

<script
  src="https://registry.npmmirror.com/page-agent/1.6.2/files/dist/iife/page-agent.demo.js"
  crossorigin="anonymous"
></script>
⚠️ 官方标注这个 Demo CDN「仅供技术评估使用」，不要用在正式生产环境。速率有限制，且使用即同意其测试服务条款。

刷新页面后，会出现一个对话浮窗，用自然语言打指令就能控制页面——输入「帮我找到提交按钮并点击」之类的，它就会自动定位并操作。

方案二：接入自己的大模型 API（推荐）

通过 URL 参数直接在 `src` 里传入自己的 API 配置，比如使用 DeepSeek：

<script
  src="https://registry.npmmirror.com/page-agent/1.6.2/files/dist/iife/page-agent.demo.js?baseURL=https%3A%2F%2Fapi.deepseek.com&apiKey=你的API密钥&model=deepseek-reasoner&lang=zh-CN"
  crossorigin="anonymous"
></script>

参数说明：

| 参数 | 示例值 | 说明 |

|——|——–|——|

|baseURL|https://api.deepseek.com（需 URL 编码） | 兼容 OpenAI 格式的 API 地址 |

|apiKey|你的 Key| 直接写在前端，API Key 对用户可见，生产环境慎用 |

|model|deepseek-reasoner| 模型名称，按对应平台填写 |

|lang|zh-CN| 界面和交互语言 |

除了 DeepSeek，理论上支持任何兼容 OpenAI 接口格式的模型（通义千问、Gemini via proxy 等均可）。

方案三：NPM 安装（适合工程化项目）

npm install page-agent

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
    model: 'deepseek-reasoner',
    baseURL: 'https://api.deepseek.com',
    apiKey: process.env.DEEPSEEK_API_KEY,
    language: 'zh-CN',
})

await agent.execute('点击提交按钮')

这种方式适合在自己的项目里做更细致的控制，API Key 可以放服务端，安全性更好。

使用体验

上手：脚本方式极其简单，真的就是贴一个 <script> 标签，5 分钟内能看到效果。NPM 方式也很干净，API 设计符合直觉。
DOM分析方式：项目用纯文本 DOM 分析而非截图，不需要 GPT-4V 这类多模态模型，普通文本模型就够，成本相对低。
响应质量：取决于你接的模型质量。接 deepseek-reasoner 效果明显优于免费 Demo，对中文指令的理解也更好。
文档：README 和官网文档覆盖基本用法，进阶配置（比如 Chrome 插件、MCP Server）文档略薄，需要翻 Issues 或 Discussions 补充信息。
社区：Star 破 14k，Fork 破 1k，活跃度还行，Issue 响应不算慢。

踩坑记录

1. API Key 暴露问题：URL 参数传 apiKey 的方式，打开浏览器开发者工具就能看到你的 Key。Demo 方式无所谓，但如果换成自己的正式 Key，访客全能看到，等于公开了你的 API Key。 解决办法：生产环境走 NPM 方式，API Key 放服务端代理，或使用有用量限制的子 Key。

2. 跨域限制:crossorigin=”anonymous” 是必须的，少了这个在部分浏览器安全策略下会加载失败。

3. Demo API 限速：官方免费测试 API 有请求频率限制，连续快速发指令会返回错误。仅体验用没问题，拿来测性能不行。

4.Chrome插件/MCP仍是 Beta :多页面任务和 MCP Server 功能标注了 Beta，实际使用中偶有不稳定，正式项目里不建议依赖。

其他说明

项目基于 [browser-use](https://github.com/browser-use/browser-use) 的 DOM 处理组件和提示词思路改写，已在 README 中标注致谢，来源透明。

MIT 协议，商用无障碍。

贡献说明里明确写了「完全由 Bot/Agent 生成的 PR 不接受」，是少见的明确态度。