Multi-Agent之GUI-Agentpage-agent的简介、安装和使用方法、案例应用之详细攻略目录page-agent的简介1、特点page-agent的安装和使用方法1、安装方法一Demo CDN快速体验方法二NPM 安装推荐2、使用方法page-agent的案例应用案例一为 SaaS 产品集成 AI Copilot——使用 Page Agent 为 Web 产品增加 AI 助手案例二智能表单填写——使用自然语言完成复杂表单操作案例三实现 Web 应用无障碍访问——使用自然语言提升 Web Accessibilitypage-agent的简介Page Agent 是阿里巴巴开源的一款纯 JavaScript 实现的页面内In-pageGUI Agent其定位为“Living in Your Webpage生活在网页中的 Agent”能够通过自然语言直接操作 Web 页面。与传统浏览器自动化方案不同Page Agent 无需浏览器扩展、Python 环境或无头浏览器也无需依赖截图、多模态模型或特殊浏览器权限而是直接运行在当前网页内部通过分析页面 DOM 实现自然语言驱动的页面操作。项目强调“一切都发生在你的网页中Everything happens in your web page”。项目采用基于文本的 DOM 操作方式将页面 DOM 转换为文本信息供大语言模型理解而不是依赖视觉识别因此能够使用普通文本模型完成页面点击、输入、滚动等操作。开发者可以自由选择自己的 LLMBring Your Own LLM包括兼容 OpenAI API 的模型以及本地部署模型。同时项目还提供可选的 Chrome Extension 用于跨页面任务并提供 MCP ServerBeta支持从外部 Agent 控制浏览器。围绕网页 AI 助手场景Page Agent 提供了多种典型应用包括 SaaS AI Copilot、智能表单填写Smart Form Filling、无障碍访问Accessibility、跨页面 AgentMulti-page Agent以及 MCP Browser Control 等。项目支持通过 CDN 一行脚本快速集成也支持 NPM 安装方式并提供完整的 PageAgent 类及内置 UI Panel方便开发者快速为 Web 应用集成自然语言操作能力。Github地址GitHub - alibaba/page-agent: JavaScript in-page GUI agent. Control web interfaces with natural language. · GitHub1、特点特点详细说明纯 JavaScript 页面内 Agent无需浏览器插件、Python、无头浏览器仅依赖页面内 JavaScript 即可运行。基于文本的 DOM 操作通过 DOM 文本分析完成页面理解不依赖截图、多模态模型或视觉识别。自定义 LLM支持开发者接入自己的大语言模型Bring Your Own LLM。一行代码集成支持通过 Demo CDN 快速集成也支持 NPM 安装。内置 UI PanelPageAgent 自动创建交互面板展示执行过程、Agent 思考及执行结果。支持多页面任务可结合 Chrome Extension 完成浏览器多个标签页之间的任务。MCP ServerBeta支持通过 MCP Server 从外部 Agent 控制浏览器。安全可控支持操作白名单Allowlist、数据脱敏Data Masking及自定义知识注入。页面级指令支持全局 System Instructions 与按页面动态生成的 Page Instructions。典型 Web AI 场景支持 SaaS AI Copilot、智能填表、辅助功能、交互式培训等场景。page-agent的安装和使用方法1、安装方法一Demo CDN快速体验README 提供了一行脚本即可体验 Demo LLMscript srchttps://cdn.jsdelivr.net/npm/page-agent/dist/iife/page-agent.demo.js crossorigintrue/script项目同时提供 Global CDN 与 China Mirror用于快速在网页中集成 Page Agent。Demo CDN 使用官方测试 LLM仅适用于技术评估。方法二NPM 安装推荐安装 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: en-US, })完成初始化后即可调用 Agent 执行自然语言任务。2、使用方法完成初始化后可直接调用 execute() 执行自然语言任务例如await agent.execute(Click the login button)或执行包含多个步骤的任务await agent.execute( Click submit button, then fill username as John )如果希望由用户输入任务可调用内置 UI Panelagent.panel.show()此外项目支持通过 instructions 配置系统级提示System Instructions及页面级提示Page Instructions在每一步执行前自动向 Agent 注入应用规则、页面上下文及行为约束帮助 Agent 更准确地理解业务逻辑。page-agent的案例应用案例一为 SaaS 产品集成 AI Copilot——使用 Page Agent 为 Web 产品增加 AI 助手README 将 SaaS AI Copilot 作为典型应用场景。开发者只需集成 Page Agent即可在无需改造后端的情况下为产品增加 AI Copilot使用户能够通过自然语言直接操作页面例如点击按钮、填写表单、执行页面操作等从而提升产品交互体验。案例二智能表单填写——使用自然语言完成复杂表单操作项目支持 Smart Form Filling 场景可将原本需要多次点击和输入的复杂流程转换为一句自然语言指令。例如在 ERP、CRM 或后台管理系统中用户仅需描述目标操作Page Agent 即可根据页面 DOM 自动完成点击、输入及页面交互提高复杂业务流程的操作效率。案例三实现 Web 应用无障碍访问——使用自然语言提升 Web AccessibilityREADME 将 Accessibility 列为重要应用场景。Page Agent 可以结合语音控制或屏幕阅读器使用户通过自然语言与 Web 应用交互为视障人士及老年用户提供更友好的访问方式从而降低复杂 Web 系统的使用门槛。