标签： GUI代理

## 项目简介

**page-agent** 是阿里巴巴出品的 **JavaScript 页面内 GUI 代理**，让 AI 通过自然语言直接控制 Web 界面。其核心理念是 —— *”The GUI Agent Living in Your Webpage”*，即：智能体不再运行在外部脚本或 Python 环境中，而是**活在页面内部**，用纯 JavaScript 操作 DOM，实现真正的轻量化 AI 能力嵌入。

亮点概要：一行脚本接入、无需浏览器插件、无需 Python 环境、无需截图 —— 纯页面内 JS 实现的 GUI 代理，让任何 Web 应用瞬间拥有 AI 操作能力。

## 安装要求和过程

### 环境要求
– **浏览器**：任意现代浏览器（Chrome/Edge/Firefox/Safari）
– **Node.js**：≥ 18（仅 NPM 安装方式需要）
– **LLM API**：支持接入任意兼容 OpenAI API 格式的大模型（默认可使用阿里云百炼、OpenAI、DeepSeek 等）

### 快速安装（一行脚本体验）

最简单的方式，在任意网页的 HTML 中插入一行 `

```

插入后刷新页面，即可看到 page-agent 的演示界面（使用官方免费测试 LLM）。

> ⚠️ 免费测试 API 仅用于技术评估，生产使用请接入自有 LLM API Key。

### NPM 安装（生产使用）

```bash
npm install page-agent
```

```javascript
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('点击登录按钮')
```

## 核心功能

## 典型使用场景

### 场景一：SaaS AI Copilot 快速接入
仅需少量代码即可为 SaaS 产品接入 AI 助手，用户可通过自然语言操控产品界面，无需重写后端逻辑。例如：在 CRM 系统中，用户说"创建一个跟进任务并设置明天的提醒"，page-agent 即可自动完成一系列 DOM 操作。

### 场景二：智能表单填充
将原本需要 20 次点击的复杂工作流简化为一句话指令，特别适合 ERP、CRM、后台管理系统等表单密集型应用。结合 LLM 的语义理解能力，page-agent 可自动识别表单字段并填入正确内容。

### 场景三：Web 应用无障碍适配
通过自然语言、语音指令、屏幕阅读器，让任意 Web 应用实现无障碍使用，极大降低残障人士使用复杂 Web 应用的门槛。page-agent 作为页面内代理，可直接操作 DOM 实现无障碍导航。

### 场景四：MCP 协议集成
通过 Beta 版 MCP Server，允许外部 AI Agent 客户端控制浏览器，实现"AI 操控 AI"的自动化链路。例如：让 Claude Code 通过 MCP 调用 page-agent，实现完整的端到端 Web 自动化测试。

## 推荐理由

> 在传统方案里，让 AI 操控 Web 界面往往意味着：部署 Python 服务、运行无头浏览器、截图 + 多模态大模型理解、处理各种环境依赖……这套方案对中小企业和个人开发者极不友好。

**page-agent 的最大价值在于"去重量化"** —— 它把 GUI 代理的核心能力塞进了一个 JS 脚本里，让任何能加载 JS 的网页都能获得 AI 操控能力。这对以下人群尤为有价值：

- **前端开发者**：无需学习 Python 自动化框架，直接用 TypeScript 扩展 AI 能力
- **SaaS 产品经理**：快速为产品 prototype 添加 AI Copilot，验证用户需求
- **企业 IT**：为内部 ERP/CRM 系统添加自然语言操作界面，提升员工效率
- **无障碍开发**：用最简单的方式为现有 Web 应用添加语音/自然语言操控

此外，项目由 **阿里巴巴** 官方开源，采用 MIT 许可证，社区活跃，文档完善（在线 Demo、完整文档站、HN 讨论帖均已上线），值得长期关注。