1. 项目定位与用途
Page Agent 是一个纯前端的 GUI 代理库，设计目标是让 Web 应用能够通过自然语言接收用户指令并自动执行界面操作。它作为嵌入式脚本运行在页面上下文中，将自然语言转换为具体的 DOM 操作序列，实现“用对话控制界面”的能力。项目不依赖任何后端服务或浏览器特权，所有逻辑均在客户端完成，适合作为 SaaS 产品的 AI 功能模块快速集成，也可用于构建智能表单助手、无障碍控制工具等。
项目档案库 / SDK
alibaba/page-agent 开源库：用途、安装与使用指南
Page Agent 是阿里巴巴开源的纯前端 JavaScript 库，允许通过自然语言指令控制网页界面，无需浏览器扩展或后端改造。适用于 SaaS AI 助手、智能表单填写、无障碍访问等场景。本页提供项目介绍、安装指南、使用示例及技术文档链接。
AI 总结
Page Agent 是阿里巴巴开源的纯前端 JavaScript GUI 代理库，通过自然语言指令直接控制网页界面，无需浏览器扩展或后端改造，支持接入任意大语言模型，可快速为 Web 应用添加 AI 助手与自动化能力。
中文项目介绍
Page Agent 是由阿里巴巴开源的 JavaScript 库，核心定位为“Living in Your Webpage”的 GUI Agent。它允许开发者通过自然语言指令直接控制网页界面，实现用户与 Web 应用的智能交互。该项目采用纯前端实现，所有操作均在页面内完成，无需依赖浏览器扩展、Python 后端或无头浏览器等外部组件。
传统 Web 应用集成 AI 能力通常需要复杂的技术栈：要么开发浏览器扩展获取页面权限，要么搭建无头浏览器服务进行截图和模拟操作，要么重构后端接入多模态模型。Page Agent 通过创新的文本-based DOM 操作方法，仅凭对 DOM 结构的文本解析即可定位和操作界面元素，避免了截图需求，也无需特殊权限，显著简化了技术实现与运维成本。
该项目适用于多种实际场景：SaaS 产品可快速嵌入 AI Copilot 提升用户体验；ERP、CRM 等复杂系统可通过一句话完成多步骤表单填写；无障碍领域能实现语音命令和屏幕阅读器控制；配合可选 Chrome 扩展还可实现跨标签页的连续任务；通过 MCP 服务器协议，可让 Claude Desktop 等外部代理控制浏览器。
项目采用 Monorepo 架构管理，核心模块包括页面控制器、UI 面板、LLM 适配层、Chrome 扩展和 MCP 服务器。它支持接入任意兼容 OpenAI 格式的 LLM，提供 TypeScript 类型定义，可通过 NPM 或 CDN 方式集成。当前版本 1.7.1 包含实验性 keepSemanticTags 配置以保留语义结构，并优化了滚动处理和可访问性元素识别。
详细信息与使用说明
2. 解决的问题
传统方案中，为 Web 应用添加 AI 自动化能力通常面临三大挑战：一是需要开发浏览器扩展获取页面访问权限；二是依赖无头浏览器进行截图和视觉识别，成本高且延迟大；三是必须改造后端服务以支持多模态模型。Page Agent 通过纯文本解析 DOM 的方式，直接读取页面元素的语义信息（如标签文本、ARIA 属性、输入框占位符等），避免了截图需求，也无需特殊权限，显著简化了技术实现。
3. 适用场景
主要适用场景包括：SaaS AI Copilot，在现有产品中嵌入 AI 助手帮助用户完成复杂操作；智能表单填写，将多步骤表单流程压缩为一句自然语言指令，适用于 ERP、CRM 等管理系统；无障碍访问，为视障用户提供语音控制能力或增强屏幕阅读器交互；跨页面自动化，配合 Chrome 扩展实现跨标签页连续任务；MCP 集成，通过 Model Context Protocol 使外部 AI 客户端控制浏览器。
4. 安装方式
项目提供两种主流集成方式：NPM 安装适合现代前端工程，执行 npm install page-agent 后通过 ES Module 导入；CDN 引入适合快速原型或非构建环境，使用 script 标签加载 dist/iife/page-agent.demo.js 即可使用免费测试 LLM。开发环境要求 Node.js ^22.13.0 或 >=24，npm >= 10。MCP 服务器可通过 npx @page-agent/mcp 单独安装，或配置到 Claude Desktop 等客户端。
5. 使用方式
基本使用流程为：导入 PageAgent 类，配置 LLM 参数（model、baseURL、apiKey、language），然后调用 execute 方法执行自然语言指令。示例代码：new PageAgent({ model: 'qwen3.5-plus', baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', apiKey: 'YOUR_API_KEY', language: 'en-US' }); await agent.execute('Click the login button'); 默认会显示内置 UI 面板，也可通过配置禁用。扩展功能需单独安装 Chrome 扩展并配置。
6. 补充说明与实现特点
项目采用 Monorepo 结构，核心逻辑与 UI 分离：@page-agent/core 提供无 UI 的核心代理能力，page-agent 包包含默认 UI 面板，extension 为 Chrome 扩展，mcp 提供 Model Context Protocol 服务器。LLM 适配层支持 OpenAI 兼容接口，可接入通义千问、GPT 等模型。当前版本 1.7.1 新增实验性 keepSemanticTags 配置以保留语义结构，并优化了滚动容器检测和可访问性元素识别。注意 Demo CDN 使用免费测试 API，仅限技术评估，生产环境需配置自有 LLM。
思维导图
Page Agent
核心库
@page-agent/core: 无 UI 的核心代理逻辑
page-controller: DOM 操作与元素交互
llms: LLM 客户端适配层
用户界面
page-agent: 主入口包（含内置 UI 面板）
ui: 控制面板组件与样式
扩展能力
extension: Chrome 跨页面扩展
mcp: Model Context Protocol 服务器
文档与演示
website: React 文档站点与落地页
docs: 多语言开发指南与 API 文档
常见问题
Page Agent 是否需要安装浏览器扩展？
核心功能不需要浏览器扩展，纯 JavaScript 脚本即可运行。但可选 Chrome 扩展用于实现跨标签页的多页面任务自动化。
支持哪些大语言模型？
支持任何兼容 OpenAI 格式的 LLM，包括通义千问、GPT、Claude 等。需自行提供 baseURL 和 apiKey，项目不捆绑特定模型。
如何快速试用 Page Agent？
最快方式是通过 CDN 一行脚本引入，使用内置的免费测试 LLM API 体验。生产环境建议 NPM 安装并配置自有 LLM 服务。
是否支持跨页面或多标签页操作？
配合可选 Chrome 扩展可实现跨浏览器标签页的连续任务执行，扩展与页面内脚本通过消息机制通信。
项目是否免费且可商用？
项目采用 MIT 许可证，可免费用于商业用途。但需遵守所使用 LLM 服务提供商的条款，Demo API 仅限技术评估。