Page-Agent：让你的网页「听话」的 JavaScript 智能体

🌍 项目背景：为什么需要 Page-Agent？

在传统 Web 自动化场景中，开发者通常需要依赖 Selenium、Puppeteer 等头部浏览器工具，或通过 OCR + 多模态 LLM 解析页面截图，这些方案存在以下痛点：

• 依赖复杂：需要后端环境、浏览器驱动或 Python 运行时。
• 权限限制：插件或扩展需用户手动安装，转化率低。
• 维护成本高：页面结构变更时，脚本需频繁更新选择器。

Page-Agent 由 阿里巴巴开源，提出了全新的解决方案：纯前端 JavaScript 智能体，直接嵌入网页运行，用 自然语言 控制 DOM 操作，无需截图/OCR，零依赖，开箱即用。

---

⚡ 核心功能：它能做什么？

1. 自然语言操控网页

• 用户输入类似「点击红色按钮」、「填写表单并提交」的指令，Page-Agent 自动解析并执行。
• 内置 DOM 语义化分析，理解按钮、输入框、下拉菜单等元素的「意图」。

2. 无需后端的纯前端方案

• 零依赖：仅需引入一个 JS 文件，无需 Node.js/Python 环境。
• 无插件：直接在网页内运行，无需用户安装浏览器扩展。

3. 自定义 LLM 支持

• 默认集成阿里通义千问等模型，也可接入 OpenAI、Gemini 等任意 LLM。
• 支持 本地模型（如 Ollama），数据不出网页，隐私安全。

4. 人机协同 UI

• 提供 可视化操作面板，展示智能体的执行步骤和决策逻辑。
• 支持 手动干预，例如用户可在关键步骤确认或修正指令。

5. 开发者友好

• TypeScript 首选：类型安全，易于集成现代前端项目。
• 丰富 Demo：提供 在线演示，一键体验。

---

🛠 快速上手：3 分钟集成指南

1. 安装

npm install @page-agent/core  # 或直接引入 CDN

或在 HTML 中引入：

<script src="https://unpkg.com/@page-agent/core/dist/bundle.js"></script>

2. 初始化智能体

import { PageAgent } from '@page-agent/core';

const agent = new PageAgent({
  llm: 'your-llm-endpoint',  // 支持 OpenAI/通义千问等
  ui: true,                  // 开启可视化面板
});

3. 执行指令

await agent.execute('帮我填写这个表单，姓名写「张三」，邮箱写「[email protected]」');

👉 查看完整文档

---

🎯 适合哪些人？

• 前端开发者：快速构建 低代码表单、智能导航 等交互功能。
• 自动化测试工程师：替代 Selenium，用自然语言编写 UI 测试用例。
• 产品经理：无需开发，通过指令 快速验证原型 或 生成演示数据。
• 客服系统开发者：集成到在线客服，让用户用自然语言 自助解决问题（如「帮我退货」）。
• 教育培训平台：为学生提供 交互式编程教学，例如「用指令控制这个网页」。

---

💡 典型应用场景

---

🔥 为什么选择 Page-Agent？

• 阿里巴巴背书：来自一线大厂的前端智能体实践，稳定性有保障。
• 轻量级：纯前端，无服务器成本，适合小型项目或原型验证。
• 隐私友好：数据不离开网页，适合金融、医疗等敏感场景。
• 社区活跃：GitHub Star 快速增长（今日 +137），持续迭代中。

📢 加入讨论：Hacker News 讨论帖 | 提交 Issue

---

「Page-Agent 让网页从‘死’的 HTML 变成‘活’的智能界面。」—— 阿里前端工程师