大家好，我是徐小夕。
架构师，曾任职多家上市公司，多年架构经验，打造过上亿用户规模的产品，目前全职创业，主要聚集于“Dooring AI零代码搭建平台”和“flowmixAI多模态办公软件”

之前和大家分享了我们的 pxcharts 多维表格编辑器和flowmixAI智能办公工作台：

flowmixAI：从 AI 知识库到企业级智能工作台

pxcharts多维表格ultra版：AI + 多维表，工作效率飙升！

JitWord，一款AI驱动的协同Word文档编辑器

上期和大家分享了我们精心打磨的协同AI文档 JitWord：

jitword协同文档

最近在技术社区发现了一款开源的AI智能体——PageAgent，是阿里搞的“网页打工人”——我们只需要在网站里植入简单的代码，就能用自然语言就能指挥它点按钮、填表单啥的，相当于给网页装了个“外挂”。

我觉得超级有意思，今天来和大家分享一下。

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

一个简单的背景介绍

我们是否遇到过这样的场景：

面对复杂的后台系统，想完成一个操作却要在层层菜单中摸索；

客服机器人只会会告知你 “点击某某按钮”，却不能直接帮你完成；

老旧系统功能繁多，新员工需要花大量时间学习操作流程……

这些问题在我的工作生涯中出现的频率很高，极大的影响了我的工作效率。

那么如果能有一款 agent，能嵌入到任何网站，我们只需要输入简单的指令，它就能协助我做完这些事情，那我也不至于每周996了。

什么是 PageAgent？

简单来说，PageAgent 是一个能嵌入网页的 AI 操作员。它不像传统的浏览器自动化工具那样面向开发者做爬虫或自动化任务，而是让网站开发者可以轻松集成，让最终用户能通过自然语言与网页交互。

想象一下，当我们使用一个复杂的 B 端系统时，不用再记住 “先点设置，再选配置，然后点击新增” 这样的操作步骤，只需告知页面 “帮我新增一个用户配置”，PageAgent 就能直接完成操作。这就是它的核心价值 —— 降低用户与网页的交互成本。

列如我把它嵌入到我们JitWord AI协同文档中，我就可以让 PageAgent 帮我们生成这个网站的使用手册，产品指南，功能亮点等，还能自动操作网页输入内容。

功能亮点

PageAgent 我在深度体验之后，总结了四大核心亮点，总结如下：

1. 智能 DOM 理解 它能深度分析网页的 DOM 结构，不需要视觉识别，纯文本就能实现精准操作。这种 “脱水” 分析方式让操作更高效、更可靠。
2. 安全可控 支持操作黑白名单和数据脱敏，还能注入自定义知识库，让 AI 严格按照我们设定的规则工作，这对企业级应用来说尤为重大。
3. 零后端部署 只需通过 CDN 或 NPM 引入，就能快速集成到现有项目中，还支持自定义 LLM 接入点，灵活度拉满。
4. 普惠智能 为复杂系统提供自然语言入口，无论是视障用户、老年用户还是新员工，都能轻松上手各类 Web 应用。

我之前也想做一个sdk，可以协助企业和用户快速理解一个网站，生成智能问答机器人，PageAgent 很好的终结了我的想法 。

技术架构深度解析

PageAgent 采用简化的 monorepo 架构，整体分为三个核心包，各部分职责清晰：

packages/
├── page-agent/          # AI 核心代理（npm: page-agent）
│   ├── PageAgent        # 代理主循环，协调工具和 LLM
│   ├── tools/           # LLM 工具定义，封装各类操作能力
│   ├── ui/              # UI 组件和面板，提供人机交互界面
│   └── llms/            # LLM 集成层，对接各类大模型
├── page-controller/     # DOM 操作层（npm: @page-agent/page-controller）
└── website/             # 文档和演示站点

架构设计思路分析如下：

1. 分层设计：将 AI 决策（page-agent）与页面操作（page-controller）分离，既保证了核心逻辑的独立性，又让 DOM 操作层可单独复用。
2. 工具化思想：所有操作都封装为工具，让 LLM 可以像调用函数一样使用，这种设计极大提升了扩展性 —— 我们可以轻松添加自定义工具。
3. 前后端分离无后端：通过纯前端技术实现核心能力，避免了后端部署带来的复杂度，这也是它能 “零后端” 的关键。
4. 事件驱动：使用类型安全的事件总线（bus.ts）实现组件间通信，降低了模块耦合度。

下面是这款开源项目采用的技术栈，如果大家想做类似的产品，可以参考一下：

应用场景

PageAgent 不是一个只存在于实验室的项目，它在实际业务中能发挥巨大价值：

• 客服系统升级：让客服机器人从 “说教” 变 “实干”，不再告知用户 “请点击某某按钮”，而是直接帮用户完成操作。
• 老旧系统智能化：一行代码就能让 legacy 系统变身 AI 助手，降低培训成本，提升用户满意度。
• 交互式教学：让 AI 边操作边讲解，列如演示 “如何提交报销申请”，新员工一看就会。
• 无障碍支持：为视障用户、老年用户提供自然语言交互入口，真正实现技术普惠。

优缺点分析

优点：

1. 集成成本极低，CDN 引入一行代码即可使用
2. 纯前端实现，无需后端部署，降低使用门槛
3. 安全性设计完善，支持操作权限控制和数据保护
4. 对开发者友善，提供清晰的文档和扩展机制

缺点：

1. 目前仅支持单页应用（SPA），多页面接力功能还在开发中
2. 不支持鼠标悬停、拖拽等复杂交互
3. 没有视觉识别能力，无法处理图片、Canvas 等内容
4. 依赖网页的语义化设计，结构混乱的页面可能效果不佳

本地部署教程

想要体验 PageAgent 超级简单，两种方式任你选：

方式一：CDN 快速引入

在我们的 HTML 中添加：

<script src="https://cdn.jsdelivr.net/npm/page-agent@latest/dist/umd/index.js"></script>
<script>
  // 初始化配置
  const pageAgent = new PageAgent({
    llm: {
      apiKey: '你的模型 API Key',
      baseURL: '模型接口地址',
      model: 'gpt-4.1-mini' // 或其他支持的模型
    },
    // 可选：配置操作权限等
  })


  // 启动
  pageAgent.start()
</script>

方式二：NPM 安装

1. 安装依赖：

npm install page-agent

2. 在项目中使用：

import { PageAgent } from 'page-agent'
const pageAgent = new PageAgent({
  llm: {
    apiKey: '你的模型 API Key',
    model: 'gpt-4.1-mini'
  }
})
pageAgent.start()

3. 运行项目，页面会出现 PageAgent 交互面板，开始体验自然语言操作吧！

官方 Roadmap 泄密（未经官方证实，仅供吃瓜）

从项目的 Roadmap 来看，开发团队正在推进一些令人期待的功能：

• 自定义知识库和指令系统（让 AI 更懂你的业务）
• 黑白名单安全机制（更精细的权限控制）
• 数据脱敏功能（保护敏感信息）
• 多页面接力操作（突破单页限制）
• Chrome 插件封装（支持跨站任务）

这些功能如果实现，PageAgent 的适用场景会更加广泛。

总结

PageAgent 为 Web 应用带来了一种全新的交互范式 —— 用自然语言取代鼠标点击。它就像给网页装上了一个 “智能大脑“，既能理解用户意图，又能动手操作页面。

对于我们开发者来说，它是一个低门槛、高价值的 AI 增强工具；

对于企业来说，它能显著降低用户培训成本，提升系统易用性；

对于普通用户来说，复杂系统不再可怕，自然语言就能轻松驾驭。

开源的魅力就在于此，一个好项目能激发整个社区的创造力。

如果大家对这款开源 Agent 项目感兴趣，不妨关注一下这个项目。

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

如果大家有更好的AI 开源项目，有好的提议，也欢迎留言交流～