阿里开源page-agent：一行代码给网站加AI操作员

为什么让AI操作网页一直这么难

做后台产品的开发者大概都遇到过类似需求：让用户说一句话，就把系统里那七八层菜单的操作自动跑完。直觉方案是上浏览器自动化，但真要落地就会发现，Python、无头浏览器、服务端三样得先配齐，业务代码一行没写，人先卡在环境上。

据B站UP主大叔大的实战分享，想让AI替用户操作网页，传统路线有三道坎绕不过去。第一道是环境门槛——一套网页自动化需要Python、无头浏览器加服务端，光搭环境就劝退一半人。第二道是成本问题——截图加多模态模型的方案，每操作一步都要截图喂给模型，又慢又贵还挑模型。第三道是信任问题——黑盒自动化在用户自己的浏览器里乱点，出了错没人拦得住，用户不敢用，业务方也不敢上。

说到底，大多数网页操作AI都在解决“让机器替人跑任务”，可网站开发者真正想要的，是“让用户用一句话操作我的网站”。这个需求一直夹在中间没人接得住。

page-agent：把AI操作员嵌进你的页面

阿里开源的 page-agent（当前版本 V1.12.4，MIT 协议）换了个思路。它是一个完全基于网页技术的图形界面智能体，不是外部工具，而是直接嵌进网站页面里。用户在页面上说一句自然语言，AI就替他点击、输入、选择、提交，把事情办完。项目在开源社区已拿到 2.9 万多颗星，一行代码接入，支持 60 多款主流大模型，服务端依赖为零。

和 browser-use 这类外部工具相比，差异很清楚：page-agent 是页面内嵌组件，对方是外部独立工具；它管当前页面，对方管整个浏览器；它面向网站开发者，对方面向爬虫和智能体开发者；它做的是用户体验增强，对方做的是后台自动化任务。两者其实不在同一条赛道上。

它凭什么这么轻：读代码，不看屏幕

page-agent 轻量的关键在于——它读页面结构，而不是截图看屏幕。它不传任何图片，不用多模态模型，没有视觉能力，只读取页面 DOM 结构再做一次高强度“脱水”压缩，把整页变成模型能读的纯文本。

这样做有三个直接收益：更快更省，不传图片就没有视觉开销，每一步调用都更轻；不挑模型，只要模型具备知识和工具调用能力即可，不必为了“看懂图”去换更贵的多模态模型；内容不出浏览器，读取和清洗都在页面内完成，还能顺手做数据脱敏。

当然这条路也有天然边界：图片、画布、三维图形这类纯视觉内容它读不到，页面的语义化程度和可访问性直接决定 AI 理解的准确率。语义化写得越好，它才越准。

所谓"DOM 结构脱水"，是指从浏览器的文档对象模型（DOM）树中提取出可交互元素、语义标签、aria 属性和文本内容，丢弃样式、布局坐标、装饰性图层等对任务执行无用的信息，最终输出一份紧凑的结构化文本送给模型。这与传统多模态方案形成鲜明对比——多模态方案每一步都要截取整屏像素图，编码成 Base64 后附在请求体中，单次传输数据量往往是纯文本方案的数十倍，费用和延迟随操作步骤线性叠加。DOM 方案的前提是页面本身有良好的语义化标记：按钮用 <button> 而非纯 <div>、表单字段挂了 label 或 aria-label、列表项有语义容器。对于老旧系统或语义化较差的页面，AI 读到的"脱水"文本可能缺少足够的上下文，这也是文中建议补 aria 标签的根本原因。

接入到底有多省事

传统方案要跑三样东西——装 Python 依赖、起浏览器自动化容器、跑无头浏览器实例。而 page-agent 只需要一个 script 标签。接入方式有三种，按项目情况选：

• CDN 引入：挂一个 script 标签就跑，国内外镜像都有，页面加载完即用；
• 包管理器引入：走 NPM，配合前端构建工具，类型提示完整，工程化项目更舒服；
• 本地模型离线运行：通过 Ollama、LM Studio 这类本地运行时接入，断网或内网环境一样能用，数据一步都不出机器。

模型完全自备，国内外本地都能接。国内有通义千问^广告、DeepSeek^广告、智谱 GLM、月之暗面 Kimi、腾讯混元、MiniMax；海外有 OpenAI GPT、Claude、Gemini、Grok。前端能做的事，何必再让后端和桌面端重来一遍。

Ollama 和 LM Studio 是两种主流的本地大模型运行时。Ollama 以命令行为主，支持 Llama、Qwen、Mistral 等主流开源模型，一条命令即可拉取并启动一个兼容 OpenAI 接口规范的本地 HTTP 服务；LM Studio 提供图形界面，适合不熟悉命令行的用户，同样对外暴露 OpenAI 兼容接口。page-agent 只需将接口地址指向 localhost 对应端口，即可在完全断网的环境下运行，所有页面内容和模型推理均在用户本机完成，满足对数据出境有严格限制的政企内网场景。这也是它"服务端依赖为零"的底层逻辑：既然模型可以在浏览器进程所在的机器上本地运行，整个自动化链路就不需要任何云端中转。

安全可控：黑白名单、脱敏、确认三件套

接入简单是一回事，敢不敢上线是另一回事。page-agent 在可控性上给了四层保障：

操作黑白名单：像删除、支付这类敏感按钮可以直接拉黑，禁止 AI 触碰；反过来也能只开白名单，把可操作范围收窄。

数据脱敏：页面内容发给模型前会先过一遍钩子，手机号、邮箱、证件号、银行卡都能自动打码。比如用两个正则把手机号和邮箱换成占位符，再把处理后的内容交给模型。

知识注入：可以注入系统级角色设定，还能按页面地址注入专属上下文，让 AI 更懂你的业务。

人机协同：内置协作面板，AI 拿不准就先问用户。比如“找到三条匹配记录，选择哪一条”，用户回答“第二条”，它才继续执行。高危操作还有两档处理——完全禁止，或必须用户确认才执行。内置工具也能改名、覆盖或直接删除。

MCP（Model Context Protocol）是 Anthropic 于 2024 年末提出的开放协议，旨在为大模型与外部工具、数据源之间建立标准化的上下文交换接口，类似于 AI 领域的"USB 接口"。page-agent 在测试阶段附带了一个 MCP 服务，意味着它可以作为标准工具节点被支持 MCP 的智能体框架调用，同时以令牌（token）验证限制调用方身份，只有持有合法令牌的应用才能通过该接口驱动页面操作。这为 page-agent 从"单页面嵌入组件"升级为"多智能体协作中的受控执行节点"提供了基础，也解释了文末提到的"只交给信任的应用"的具体实现方式。

四类典型落地场景

接入即用的场景，UP主整理了四类。SaaS AI 副驾驶——不用重写后端，用户在面板里说需求，AI 直接操作界面完成任务，适合想快速补齐 AI 能力的产品团队。智能表单填写——把 20 次点击变成一句话，“填上周五出差的报销单”，姓名金额自动补好，是 ERP、CRM 管理后台的好搭档。客服机器人升级——从“请先点设置再点高级”升级为直接替用户把操作做完。无障碍增强——给视障用户、老年用户一个自然语言入口，对接屏幕阅读器或语音助手，复杂软件也能人人可用。

此外还有两个值得留意的用法：老系统智能化改造，一行代码让历史遗留系统具备 AI 操作能力；以及产品教学演示，让 AI 现场边做边教，比文字说明直观得多。这些场景的共同点是——AI 不再躲在后台跑批，而是站在用户面前办事。

两段代码看懂落地方式

第一步，接上模型执行任务。初始化时填四样：模型名、接口地址、密钥、语言，然后调用执行方法传一句自然语言指令，比如“填写上周五出差的报销单”；也可以把面板交给用户自己说需求。切换国内模型只需改三行配置。

第二步，把内部业务能力做成工具挂上去，让 AI 用你的接口办事而不是瞎猜。比如定义一个“查订单”工具，用结构校验约束入参（订单号必须是字符串），执行时带着取消信号去请求你自己的接口。想禁用某些能力，把内置脚本执行工具设成空值整条移除即可。

落地要点一句话：页面内的自动化交给它，业务逻辑仍走你自己的接口，入参用结构校验，权限和高危动作直接关掉。

能力边界要提前知道

支持的操作：点击、文本输入、下拉选择、页面滚动（垂直和水平）、表单提交、焦点切换，同源单层 iframe 也能处理，执行 JavaScript 是可选开关，默认可关闭。

做不了的：悬停、拖拽、右键菜单、键盘快捷键、按坐标定位的操作、嵌套框架和跨域框架、绘图，以及必须靠脚本才能控制的代码编辑器。

效果不理想时可按五步排查：先从单步简单指令试起；换更强的模型排除“不够聪明”这个变量；把复杂指令写具体或先拆解再逐步执行；补上下文注入让 AI 别猜；最后检查清洗结果，确认关键信息和可操作元素还在。个别难搞的元素可以补 aria 标签或开发专用工具。

小结：把网页自动化压缩成一个 script 标签

page-agent 做的其实就一件事——把 AI 操作网页从一套外部工程，压缩成一个 script 标签。四个关键词概括：一行代码接入、纯文本不用视觉模型、可控（黑白名单/脱敏/确认三件套齐全）、MIT 开源可商用。

它不要 Python、不要无头浏览器、不要服务端，靠纯页面结构理解降低成本，调用更轻更快，同时把可控性和可扩展性做全，适合真实业务场景。想再进一步的话，核心能力之外还有一个可选浏览器扩展，负责跨页面跨标签的连续任务，并附带一个测试阶段的 MCP 服务，用令牌保护只交给信任的应用。做 SaaS 想加副驾驶、做后台想降门槛、做客服想从“教你点”变成“帮你点”，都可以从它开始。