跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptSaaSAI大前端

阿里开源 PageAgent:让 AI 住进网页,用自然语言操控界面

阿里开源的 PageAgent 是一个纯前端的 JavaScript GUI 智能体框架,旨在解决传统 Web 自动化依赖重环境、需截图 OCR 及权限门槛高的问题。它通过直接读取和操作页面 DOM,将简化结构发送给 LLM 决策,无需多模态模型即可实现自然语言控制网页。支持 SaaS Copilot、智能表单填写及无障碍访问等场景,采用 BYOK 架构保障隐私,适合希望快速为产品集成 AI 交互的前端开发者。

赛博朋克发布于 2026/3/22更新于 2026/8/1744 浏览
阿里开源 PageAgent:让 AI 住进网页,用自然语言操控界面

阿里开源 PageAgent:让 AI 直接'住进'你的网页

不需要浏览器插件,不需要 Python,不需要截图——一行 JS,让你的网页秒变 AI 智能体。

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(住在你网页里的 GUI 智能体)

它能做什么?

用自然语言控制网页界面。你告诉它'点击登录按钮'、'把表单里的公司名改成阿里巴巴'、'帮我找到最近的订单并导出',它就真的去做。

它有多轻量?

  • ✅ 纯 JavaScript,直接嵌入页面
  • ✅ 不需要浏览器扩展(有可选插件用于多 Tab 场景)
  • ✅ 不需要 Python / headless 浏览器
  • ✅ 不需要截图,不需要 OCR,不需要多模态大模型
  • ✅ 不需要特殊权限

它通过直接读取和操作页面 DOM 来理解和控制界面,把清理后的 DOM 结构发给 LLM,由 LLM 决策操作步骤,再由 PageAgent 执行。整个过程全在浏览器里完成。

典型应用场景:

  • SaaS AI Copilot:几行代码给你的产品加上 AI 副驾,不用改后端
  • 智能表单填写:把原本要点 20 下的操作,变成一句话
  • 无障碍访问:让任何 Web 应用都能通过自然语言、语音操控
  • ERP / CRM 系统提效:这类系统交互复杂,PageAgent 特别适合

架构设计:它是怎么工作的?

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,自带密钥)
    npm install page-agent
    
    import { PageAgent } from 'page-agent'
    
    const agent = new PageAgent({
      model: 'qwen3.5-plus',
      baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
      apiKey: 'YOUR_API_KEY',
      language: 'zh-CN',
    })
    
    // 用自然语言执行操作
    await agent.execute('点击登录按钮')
    await agent.execute('把用户名填写为 admin')
    await agent.execute('找到最近 7 天的订单,导出为 Excel')
    

    支持任何兼容 OpenAI 接口的 LLM 服务,包括阿里云百炼(Qwen)、OpenAI、Anthropic 等。

    方式三:多 Tab 场景——Chrome 扩展

    对于需要跨多个标签页操作的复杂任务,可以安装配套的 Chrome 扩展(目前仍在开发中,标注为 WIP)。配置好 API Key 后,Agent 的操作范围可以从单页面扩展到整个浏览器。

    隐私与安全

    PageAgent 采用 BYOK(Bring Your Own Key) 架构:

    • 数据只在你的浏览器和你配置的 LLM 服务商之间流动
    • 项目本身没有任何后端,不收集用户数据
    • API Key 仅存储在浏览器本地(localStorage)
    • 所有配置不会同步到外部服务器

    与其他方案对比

    特性PageAgentbrowser-usePlaywright/Selenium
    运行环境纯浏览器 JSPython + 浏览器Python/Node + 无头浏览器
    是否需要截图❌ 不需要✅ 需要❌ 不需要
    多模态模型❌ 不需要✅ 需要❌ 不需要
    嵌入现有产品✅ 极易❌ 困难❌ 困难
    适合场景前端增强/Copilot服务端自动化测试/服务端自动化

    值得一提的是,PageAgent 在 README 中坦诚地致谢了 browser-use 项目——DOM 处理组件和部分 Prompt 设计借鉴自该项目,并遵循 MIT 协议开源。开放的态度让人好感度倍增。

    适用场景与注意事项

    PageAgent 是一个思路清晰、定位精准的开源项目,核心价值在于'轻量嵌入'。

    适合这些人用:

    • 🎯 想给自家 SaaS / 后台系统快速加上 AI Copilot 的前端开发者
    • 🎯 做 RPA 或自动化工具的工程师,想降低环境依赖
    • 🎯 希望让老旧内部系统(ERP/CRM)支持自然语言交互的团队
    • 🎯 对 Web Agent 技术感兴趣、想研究客户端 Agent 方案的研究者

    需要注意的是:

    • 目前 Chrome 扩展仍在开发中(WIP)
    • 跨域、登录态等复杂场景可能需要额外处理
    • Demo API 仅供评估,生产使用需自备 LLM API Key

    AI 与 Web 的结合,正在从'服务端控制浏览器'向'Agent 住进页面'演进。PageAgent 是这个方向上一个值得关注的实践。


    资源链接:

    • GitHub: https://github.com/alibaba/page-agent
    • 官网文档:https://alibaba.github.io/page-agent/

    目录

    1. 阿里开源 PageAgent:让 AI 直接“住进”你的网页
    2. Web 自动化的现实挑战
    3. 核心设计思路
    4. 架构设计:它是怎么工作的?
    5. 怎么用?三种接入方式
    6. 方式一:最快体验——Demo LLM
    7. 方式二:编程接入(BYOK,自带密钥)
    8. 方式三:多 Tab 场景——Chrome 扩展
    9. 隐私与安全
    10. 与其他方案对比
    11. 适用场景与注意事项
    • 免费图片AI生成工具免费生成了解详情
    • Magick API 一键接入全球大模型注册送1000万token查看
    • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
    • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
    • 100+免费在线小游戏爽一把
    极客日志微信公众号二维码

    微信扫一扫,关注极客日志

    微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

    更多推荐文章

    查看全部
    • MySQL 核心原理与实战:从基础到高可用架构
    • 前端面试核心考点与高频题库汇总
    • 基于 Java SpringBoot Vue MySQL 的考试报名系统
    • FreeRTOS 链表详解
    • OpenClaw 生态:16 款 AI Agent 选型指南
    • Python 数据可视化入门教程
    • Topaz Photo AI 核心功能解析:AI 降噪、锐化与无损放大技术
    • 基于 Higress 将 REST API 转换为 MCP Server 实践
    • VS Code Copilot 深度使用指南:从安装到高级配置
    • 使用 HTML 和 JavaScript 实现滑动验证码
    • MIT 电机混合扭矩模式控制详解
    • 前端数据埋点:核心原理、主流方案与落地实践
    • OpenCode 开源 AI 编程助手实战指南
    • 开源机器人 AI 框架 LeRobot 入门与实践
    • 使用 APT 包管理器安装 libwebkit2gtk-4.1-0 指南
    • OpenClaw SOUL.md:用自然语言定义 AI Agent 的身份与边界
    • 群晖 NAS 搭建 Nastool 影音库及 cpolar 远程访问实践
    • DeerFlow 2.0 实战:生产级 AI Agent 框架的 Docker 部署与编排
    • Llama3 微调实战:单卡训练提升大模型自我认知
    • CentOS 搭建私人漫画库:Teemii+cpolar 实现公网访问

    相关免费在线工具

    • RSA密钥对生成器

      生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

    • Mermaid 预览与可视化编辑

      基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

    • 随机西班牙地址生成器

      随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

    • Keycode 信息

      查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

    • Escape 与 Native 编解码

      JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

    • JavaScript / HTML 格式化

      使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online