阿里开源 PageAgent：纯前端 JS 实现网页自然语言操控
Web 自动化一直是开发者的痛点。如果你用过 Selenium、Playwright，或者最近流行的 browser-use，你一定遇到过这些头疼的问题：环境太重，得装 Python、headless 浏览器和各种依赖；依赖截图加 OCR，慢、贵还不准；权限门槛高，要控制浏览器往往需要特殊权限甚至操作系统级别的访问；对现有产品改造成本大，想给 SaaS 加个 AI Copilot 可能要重写后端。
这些问题的根源在于传统 Web 自动化思路是'从外面控制浏览器'，就像隔着玻璃操作键盘，自然别扭。阿里巴巴开源的 PageAgent，换了一个思路：让 AI Agent 直接住进网页里面。
核心思路：从外部控制到内部驻留
PageAgent（GitHub: alibaba/page-agent）是一个纯前端的 JavaScript GUI 智能体框架。它的核心理念很简单：The GUI Agent Living in Your Webpage。
它能做什么？用自然语言控制网页界面。你告诉它'点击登录按钮'、'把表单里的公司名改成阿里巴巴'、'帮我找到最近的订单并导出'，它就真的去做。
它有多轻量？
- 纯 JavaScript，直接嵌入页面
- 不需要浏览器扩展（有可选插件用于多 Tab 场景）
- 不需要 Python / headless 浏览器
- 不需要截图，不需要 OCR，不需要多模态大模型
- 不需要特殊权限
它通过直接读取和操作页面 DOM 来理解和控制界面，把清理后的 DOM 结构发给 LLM，由 LLM 决策操作步骤，再由 PageAgent 执行。整个过程全在浏览器里完成。
典型应用场景包括 SaaS AI Copilot，几行代码给你的产品加上 AI 副驾，不用改后端；智能表单填写，把原本要点 20 下的操作变成一句话；以及无障碍访问，让任何 Web 应用都能通过自然语言、语音操控。
架构设计：它是怎么工作的
PageAgent 是一个组织清晰的 monorepo，核心模块分工明确：
packages/
├── core/ # 核心 Agent 逻辑（无 UI）
├── page-agent/ # 带内置 UI 面板的主入口
├── page-controller/# DOM 操作层（独立于 LLM）
├── ui/ # 面板 UI（与 Agent 解耦）
├── llms/ # LLM 客户端适配层
└── extension/ # Chrome 扩展（多 Tab 支持，WIP）
工作流程大致如下：用户输入自然语言指令，PageAgent 清理当前页面 DOM 提取语义化结构，将简化的 DOM 加指令发送给 LLM（支持 Qwen、OpenAI 等），LLM 返回操作步骤，page-controller 执行具体 DOM 操作，循环直到任务完成。
关键亮点是不依赖截图。绝大多数竞品（包括 browser-use 的原始方案）要截图发给视觉模型识别。PageAgent 直接用 DOM 结构，这意味着速度更快，无需图像处理；成本更低，无需多模态模型；准确性更高，结构化信息比图像识别可靠。
怎么用？三种接入方式
方式一：最快体验——Demo LLM
打开官网 alibaba.github.io/page-agent，使用项目提供的免费 Demo API（仅供技术评估，有频率限制），直接在页面上输入指令体验。
方式二：编程接入（BYOK，自带密钥）
import { PageAgent } from 'page-agent'
const agent = new PageAgent({
model: ,
: ,
: ,
: ,
})
agent.()
agent.()
agent.()
