【GitHub项目推荐--Page Agent：网页内的 GUI 智能体】⭐⭐⭐
简介
Page Agent 是由阿里巴巴开源的一款纯前端 GUI 智能体框架，其核心理念是“The GUI Agent Living in Your Webpage”。它颠覆了传统 Web 自动化需要依赖后端服务、无头浏览器或浏览器插件的模式，直接将 AI 智能体嵌入到网页中运行。用户通过自然语言指令（如“点击登录按钮”、“填写表单并提交”），即可控制网页界面完成复杂操作。该项目采用 MIT 协议开源，旨在为 SaaS 产品、后台系统提供零基建、一行代码即可集成的 AI Copilot 能力。
主要功能
自然语言控制界面：用户使用自然语言描述任务，Agent 自动解析并执行点击、输入、选择、滚动等 DOM 操作。
纯前端架构：无需 Python、无头浏览器或后端服务，直接在浏览器 JavaScript 环境中运行，数据不离开用户端。
文本化 DOM 操作：摒弃了依赖截图和多模态模型的传统方案，通过解析和清理 DOM 结构发送给 LLM，速度快、成本低、精度高。
Human-in-the-Loop：提供可视化操作面板，展示 Agent 的思考过程，遇到歧义时主动询问用户确认，支持人工干预。
多模型支持：支持 OpenAI、Claude、通义千问、Gemini 等任何兼容 OpenAI API 格式的模型，采用 BYOK（Bring Your Own Key）模式。
跨页面扩展：提供可选的 Chrome 浏览器扩展（WIP），支持跨多个标签页的复杂工作流自动化。
安装与配置
方式一：CDN 快速体验（Demo）
在 HTML 中引入 Demo 脚本（含免费测试 API，仅限评估）：
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.5.11/dist/iife/page-agent.demo.js" crossorigin="true"></script>方式二：NPM 安装（生产环境）
通过 npm 安装包，并自行配置 LLM API：
npm install page-agent配置参数
初始化 PageAgent 实例时需配置 LLM 连接参数：
model：使用的模型名称（如qwen3.5-plus）。baseURL：LLM API 的基础地址（如 OpenAI 或 DashScope 端点）。apiKey：你的 API 密钥。language：界面语言（如zh-CN）。
如何使用
初始化：在页面 JavaScript 中引入并创建 Agent 实例。
执行指令：调用
agent.execute()方法，传入自然语言指令。观察执行：页面右下角会弹出操作面板，显示 Agent 的思考步骤（Plan）和执行状态（Running/Done）。
人工确认：当 Agent 无法确定唯一操作目标时（如页面有多个“提交”按钮），面板会高亮候选元素并等待用户点击确认。
典型指令示例：
“点击登录按钮”
“在搜索框输入‘手机’并搜索”
“把表单里的姓名改成张三”
“找到价格最高的商品并加入购物车”
应用场景实例
实例 1：SaaS 产品 AI 副驾
场景：一个复杂的 ERP 或 CRM 系统，新用户需要经过繁琐的培训才能完成“创建客户档案”操作。
应用：集成 Page Agent 后，用户只需在聊天框输入“帮我创建一个名为阿里巴巴的新客户，类型为大客户，联系人李四”，Agent 自动导航到创建页面，填写所有字段并提交，极大降低学习成本。
实例 2：智能表单填写与数据录入
场景：财务人员每天需要将纸质报表数据录入到几十个字段的 Web 系统中，手动操作易错且耗时。
应用：财务人员口述数据“日期 3月22日，项目名差旅费，金额 1200”，Agent 自动定位对应输入框并填入数据，人员仅需最后核对提交。
实例 3：无障碍访问与语音控制
场景：视障用户或行动不便者难以使用鼠标精确点击网页上的小按钮或链接。
应用：结合语音识别技术，用户说出“打开收件箱”、“阅读第一封邮件”，Page Agent 直接操作 DOM 完成跳转和朗读，实现真正的零障碍 Web 交互。
GitHub 地址
项目仓库：https://github.com/alibaba/page-agent