### [page-agent：阿里巴巴出品的页面内JS GUI代理，一行脚本让网页拥有AI操控能力（23K+Stars）](https://www.willai.cc/article/3296)

**Published:** 2026-07-05T05:57:23

**Author:** hiyoho

**Excerpt:** ## 项目简介 **page-agent** 是阿里巴巴出品的 **JavaScript 页面内 GUI 代理**，让 AI 通过自然语言直接控制 Web 界面。其核心理念是 —— *”The GUI Agent Living in You

![page-agent Logo](https://alibaba.github.io/page-agent/assets/logo.png)

\## 项目简介

\*\*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 中插入一行 \`\` 标签，即可立即体验：

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

\## 核心功能

1

### 极低接入成本 —— 一行脚本即可嵌入

无需浏览器插件、无需 Python 环境、无需无头浏览器，纯页面内 JavaScript 实现，所有功能都在当前网页内运行。仅需一行 标签即可为任意 Web 应用接入 AI 控制能力，CDN 和 NPM 包双重分发。

2

### 轻量交互模式 —— 基于 DOM 操作，无需截图

摒弃了传统 GUI 代理依赖截图 + 多模态大模型的重量级方案，page-agent 直接基于 DOM 结构理解页面，用文本描述操作指令。优势：延迟更低、成本更低、无需特殊权限、不依赖视觉大模型。

3

### 自定义大模型支持 —— 无绑定，完全开放

支持接入任意兼容 OpenAI API 格式的自有 LLM，无厂商绑定。推荐使用阿里云百炼 qwen3.5-plus，也可接入 OpenAI GPT、DeepSeek、Gemini 等主流大模型，灵活适配企业已有 AI 基础设施。

4

### 扩展能力 —— Chrome 扩展 + MCP Server（Beta）

可选安装 Chrome 扩展，支持跨多页面任务调度；同时提供 Beta 版 MCP Server，允许外部 AI 系统通过 MCP 协议控制浏览器，与主流 AI Agent 框架无缝集成。

\## 典型使用场景

\### 场景一：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 讨论帖均已上线），值得长期关注。

### 🔗 相关链接

**GitHub：**[github.com/alibaba/page-agent](https://github.com/alibaba/page-agent)（23K+ Stars）

**在线演示：**[alibaba.github.io/page-agent](https://alibaba.github.io/page-agent/)

**官方文档：**[alibaba.github.io/page-agent/docs](https://alibaba.github.io/page-agent/docs/introduction/overview)

**NPM 包：**[npmjs.com/package/page-agent](https://www.npmjs.com/package/page-agent)

**许可证：**MIT License（可自由商用、修改、分发）

**Tags:** AI, AI Agent, AI开源项目, GUI代理, LLM, MIT许可, NLP, page-agent, TypeScript, 开源

**Categories:** 开源项目

---