一行代码让网页拥有 AI 助手：阿里开源的 Page Agent 太香了

---

做过 Web 开发的人都知道，给产品加 AI 功能听起来简单，实际落地一堆坑。

要么需要后端改造接入大模型，要么要用户装浏览器插件，要么得维护一个 Python 服务跑自动化脚本。搞到最后，一个简单的「智能表单填写」功能，可能要折腾一两周。

如果有个方案，只需要在网页里加一行代码，就能让 AI 接管整个页面操作，是不是很香？

最近阿里巴巴开源了一个项目，专门解决这个问题。

---

一、Page Agent 是什么

在 GitHub 上有个叫 page-agent 的项目，来自阿里巴巴，Star 数已经突破了 **1.1万+**。

它的定位是「住在网页里的 GUI 智能体」——简单说，就是在纯浏览器环境里跑一个 AI Agent，能听懂自然语言指令，然后自动操作网页上的元素。

比如你说「帮我把表单里的姓名改成张三，然后点击提交」，它就能自动找到对应的输入框和按钮，完成整个操作流程。

最关键的是：纯前端实现，一行代码接入，零后端改造。

---

二、核心功能详解

这个项目解决了很多传统方案的痛点。我仔细看了它的实现逻辑，挑几个最实用的功能来讲。

2.1 自然语言控制网页

解决什么问题：复杂网页操作流程对用户不友好，比如后台管理系统、配置页面等，用户经常找不到功能入口。

Page Agent 允许用户用自然语言描述想做什么：

• • 「帮我创建一个新项目，名称为测试项目」
• • 「把第三行的数据导出成 Excel」
• • 「找到订单号为 12345 的详情页」

AI 会自动解析意图，定位页面元素，执行点击、输入、滚动等操作。

实际价值在于，把复杂的 GUI 交互变成简单的对话，大幅降低用户使用门槛。

2.2 纯浏览器端实现

解决什么问题：现有的 Web Agent 方案大多需要浏览器扩展、Python 后端或 headless 浏览器，部署成本高。

Page Agent 是纯 JavaScript 实现：

• • 不需要安装浏览器扩展
• • 不需要 Python 环境
• • 不需要 headless 浏览器
• • 不需要后端服务

只需要引入一个 JS 文件，就能在任意网页里启用 AI 能力。

2.3 基于文本的 DOM 操作

解决什么问题：很多 AI 操作网页的方案依赖截图 + 多模态 LLM，成本高、延迟大、需要视觉模型支持。

Page Agent 采用纯文本方式操作 DOM：

• • 解析页面 HTML 结构
• • 提取可交互元素（按钮、输入框、链接等）
• • 基于语义理解定位目标元素
• • 执行原生 DOM 操作

这种方式不需要视觉模型，用普通文本模型就能完成，成本和延迟都更低。

2.4 人机协作界面

解决什么问题：完全自动化的 AI 操作可能出错，用户需要有控制和干预的能力。

Page Agent 提供了美观的交互 UI：

• • 悬浮在页面上的对话窗口
• • 实时展示 AI 的操作步骤
• • 支持用户随时中断或纠正
• • 关键操作需要用户确认

这样既享受了 AI 的便利，又保留了人工的最终控制权。

2.5 可选 Chrome 扩展

解决什么问题：有些任务需要跨多个页面或标签页完成，单页面 Agent 能力有限。

Page Agent 提供了可选的 Chrome 扩展版本：

• • 支持跨标签页操作
• • 支持多页面任务流
• • 保持同样的自然语言交互方式

⚠️ 注意：基础版是纯前端实现，多页功能需要配合 Chrome 扩展使用。

---

三、技术亮点

如果你是开发者，这个项目的几个技术设计值得关注：

文本化 DOM 理解：不同于截图方案，Page Agent 通过解析 HTML 结构理解页面，将 DOM 元素转化为 LLM 可理解的描述文本，大幅降低模型调用成本。

零侵入集成：通过 script 标签引入即可，不需要修改现有代码结构，对已有项目零侵入。

自定义 LLM：支持接入自己的大语言模型，不强制绑定特定服务商。

---

四、快速上手

Page Agent 的接入非常简单，一行代码搞定：

<scriptsrc="https://cdn.jsdelivr.net/npm/page-agent@latest/dist/iife/page-agent.demo.js"crossorigin="true"></script>

装好之后，页面上会出现一个悬浮的对话按钮，点击即可开始对话。

✅ 环境要求：现代浏览器即可，支持 Chrome、Firefox、Safari、Edge

⚠️ 注意：Demo 版本使用免费测试 LLM API，仅供技术评估。生产环境建议配置自己的 API Key。

---

五、适合谁用

• • SaaS 产品开发者：想快速给产品添加 AI Copilot 功能
• • 后台管理系统开发者：简化复杂的表单和配置流程
• • 前端工程师：探索 AI 与 Web 页面的新交互方式
• • 无障碍产品负责人：为视障或操作不便用户提供自然语言操作入口
• • AI 产品经理：验证 AI Agent 在 Web 场景的应用效果
• 

---

六、写在最后

Page Agent 给我最大的感受是——AI 能力的集成正在变得越来越轻量。

以前要给网页加 AI 功能，可能需要一个团队折腾几周。现在阿里把这套能力封装好，一行代码就能接入。这对中小团队来说是个福音。

它的局限性也很明显：目前主要适用于操作密集型页面（表单、后台、配置页等），对于重交互、游戏化的页面效果有限；Demo 版本的模型能力也有待生产环境验证。

但它代表了一个趋势：AI Agent 正在从前沿探索变成基础设施。

它能帮你 快速为产品添加 AI 助手能力，也能 降低用户操作复杂网页的门槛。如果你在寻找轻量级的 Web AI 方案，值得尝试一下。

开源地址：https://github.com/alibaba/page-agent 

在线 Demo：https://page-agent.github.io/demo

觉得有用的话，点个赞、收藏一下，也欢迎转发给需要的朋友。

有什么想聊的，评论区见。

关注「妙想栈」，每天带你发现 GitHub 上最值得关注的 AI 开源项目。