本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
【腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
今年以来 Agent 大火，以至于不少系统都在求变。
新系统还好说，但不少老系统也想凑热闹。这些老系统，有的用的是 JDK 6、有的是 JDK 8。搞 Java 的都知道，Spring AI 这类框架都是 JDK 17 起步的，老版本的 JDK 都得不到支持。
业务看到我们的一些新系统有了 AI，就想让老系统也具备这些能力。
好说歹说，我想起了阿里开源的 Page-Agent，一行 JS 就可以让老系统秒变 AI。对老项目的 AI 改造来说，零侵入、前端智能化、企业系统升级，而且超级简单。
尤其是，面对公司用了十多年的 ERP、OA、HR、CRM 等系统，后台加一个“AI 助手”，让业务能对着页面说话完成操作。
面对这种场景，我里面用上了 Page-Agent，花了一个下午验证，当晚就交了 demo。Boss 和业务都大喜，一举三得。借此机会，我们就一起来一次 Page-Agent 实战吧。
文章配图参见 https://mp.weixin.qq.com/s/ej_GU2vDtfepBZByoOhkqw。
Page-Agent 是什么？
Page-Agent 是阿里巴巴开源的纯前端 GUI Agent，定位非常精准，住在你的网页里，用自然语言操作界面。
它不需要：
- 浏览器插件
- Python 环境
- 无头浏览器（Headless）
- 后端接口改造
- 截图权限
它只需要：
- 一个
<script>标签，或npm install page-agent - 你自己的 LLM API Key（OpenAI、Claude、Qwen、DeepSeek 都行）
阿里官方给它定的调子是 The GUI Agent Living in Your Webpage，不是外部控制浏览器，而是直接在页面内部运行，跟你的业务代码同进程。
为什么它对老项目特别友好？
这个开源作品对老项目来说，真的是太友好了。
零后端改造
传统给系统加 AI 能力，要么在后端搭一套 Agent 编排逻辑（LangChain、Dify 那套），要么做大量 API 封装。Page-Agent 完全走前端路线。
- 它直接读取当前页面的 DOM，理解界面结构
- 它直接触发原生浏览器事件（click、input、focus）
- 它天然继承用户的登录态和权限（因为就在当前页面里跑）
这样带来的零后端改造，让我们的后端一行代码不用改。而且，不管你后端是 Java、Go，还是 PHP。
一行代码接入
最快的方式，连 npm 都不用装。
对，阿里官方甚至是考虑到了老项目，连 npm 都没用。直接搞了一个 js 引入，即可实现 AI 能力。
<script src="https://cdn.jsdelivr.net/npm/page-agent@latest/dist/iife/page-agent.demo.js"
crossorigin="true"></script>页面加载后，右下角会出现一个 AI 面板。输入“帮我填写昨天的销售日报并提交”，Agent 就会自动识别表单字段、填入数据、点击提交。
需要注意的是，Demo CDN 用的是免费测试 LLM，仅用于技术评估。生产环境建议接入自己的模型。
不挑技术栈
你的老系统是用 jQuery 写的？没问题。是 Vue 2 的单页应用？没问题。是十年前的 ExtJS 后台？也没问题。只要页面有 DOM，Page-Agent 就能读。
因为它不依赖框架，只依赖浏览器原生的 DOM API。
为什么它不用截图也能看懂页面？
为什么它不用截图也能看懂页面？这应该是 Page-Agent 最聪明的设计决策，也是它能在页内轻量运行的关键。
传统方案的痛点
市面上大多数 GUI Agent（比如 browser-use）走“截图 + 多模态 LLM”路线。
- 截图要走 GPU 渲染，延迟高
- 图像 token 成本是文本的 10~100 倍
- 需要特殊权限（截屏要用户授权或扩展能力）
- 在页内纯 JS 环境根本玩不转
Page-Agent 的解法
Page-Agent 不截图，靠 Text-based DOM。它把页面的 DOM 序列化成结构化文本，直接喂给文本 LLM。
LLM 看到的不是一张图，而是这样的描述。
[0] <button>登录</button> (visible, clickable)
[1] <input>邮箱</input> (visible, type=email)
[2] <input>密码</input> (visible, type=password)
[3] <a>忘记密码?</a> (visible)然后 LLM 输出，“点击 [0] 按钮”，Agent 再翻译成实际的 DOM 操作。
这套设计具备以下的好处。
- 不依赖多模态模型，普通文本 LLM 就能跑，成本低
- 不需要截图权限，零权限申请
- 延迟低，token 消耗少
- 对老项目友好——不需要页面做视觉改造
但它的代价也有，纯文本描述会丢失视觉信息（比如靠颜色传达的禁用状态、靠位置传达的层级关系）。但在企业后台、表单密集的场景里，这个代价完全可以接受。
Page-Agent 的 DOM 处理组件和 prompt 设计脱胎于 browser-use 项目，按 MIT 协议合规引用。它站在了一个成熟项目的肩膀上。
五个真实使用场景
有老项目改造计划和需要的，推荐看一看。
SaaS 产品的 AI Copilot
几行代码给你的产品加上 AI 副驾驶，用户不用学你的 UI，直接说：
「把上周的销售数据导出成 Excel，筛选出金额大于 1 万的订单」
Agent 自己找到导出按钮、选时间范围、点确认。
复杂表单一键填写
ERP、CRM、管理后台的表单动辄二三十个字段，老员工都嫌烦，新员工不会填。
「按上次的模板，把客户信息填进去」
一句话，20 次点击变 1 句话。
无障碍增强
让任何 web 应用通过自然语言可操作。配合读屏软件和语音指令，视障用户也能零门槛使用复杂网页。
新员工培训助手
新入职的同事面对复杂的后台系统一脸懵？让他对着 AI 面板说话：
「帮我发起一个采购申请，金额 5000，供应商选上次那个」
Agent 带着他一步步完成，比看文档快十倍。
跨页面任务（需 Chrome 扩展）
装上可选的 Chrome 扩展后，Agent 能跨 tab 操作：
「在 A 系统查到这个客户的订单号，到 B 系统建一张售后工单」
单页 JS 做不到的事，扩展帮你做到。
效果对比
当前，阿里的这个 Page-Agent star 数遥遥领先于同类项目。下面是一份改造前后的效果对比，供大家参考。
| 指标 | 改造前 | 改造后 |
|---|---|---|
| 填写 35 字段表单 | 3~5 分钟 | 35 秒（说一句话 + 确认） |
| 新员工上手时间 | 1~2 天培训 | 当天可用 |
| 后端改造量 | — | 0 行 |
| 前端改造量 | — | 1 行 script 标签 |
除了效果好之外，它还具备 Human-in-the-Loop，让每一步都可控。
Page-Agent 内置了人机确认机制。在执行关键操作前，它会展示「我接下来要点击【保存】按钮」，等你点确认才执行。
这在生产环境特别重要，你不会希望 AI 误操作把真实订单删了。
另外，它还支持 MCP Server，让外部 Agent 也能控制你的页面。
Page-Agent 提供了可选的 MCP Server（Beta），让 Claude Desktop、Cursor 这些支持 MCP 的 AI 客户端从外部控制浏览器。
这意味着，我们可以把 Page-Agent 当成一个 MCP 工具，集成到更大的 Agent 工作流里。
总结
阿里的 Page-Agent 给老项目 AI 化带来了第三条路。
- 重写后端。成本极高，周期极长
- 外部自动化工具。依赖重，用户体验差
- Page-Agent。一个 script 标签，零后端改造，直接在页面里长出 AI 能力。
当然，它也不是万能药，它是给产品加 AI 体验的，不是替代测试和爬虫工具的。但在 SaaS 产品增强、复杂后台提效、无障碍改造 这几个场景里，它是目前最轻量、最务实的方案。
如果有读者的团队也在为老系统的 AI 化发愁，建议花半小时接入 Demo 试试，验证成本几乎为零，收益可能超出预期。
有不少网友觉得我文章中的配图还不错，这里我给大家推荐一本书《了不起的Agent Skills：用AI创建你的数字员工》。
这是一本非常务实、面向实战的“操作手册”。被一些读者称为“Agent Skills 橙皮书”，评价其“把 AI Skill 的标准、设计原则、设计模式写得很透彻”。结合书中的案例，搞懂 Skill，制作 Skill，并通过其中的 Agent 等，实现绘画、视频制作等。
感兴趣的网友，可以评论区留言，留言中点赞最高的 5 位，我将免费包邮送出 5 本，活动本周五早上 8 点截止。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » 一行 JS 代码让 10 年的 SaaS 老系统秒增 AI 功能