今天在 GitHub Trending 上看到一个有意思的项目：Page Agent，它是"活在网页里的 GUI Agent"——不需要浏览器扩展、不需要 Python 后端、不需要无头浏览器，只需一段 JavaScript 就能让自然语言直接操控网页界面。
Page Agent1 是阿里巴巴开源的一个客户端侧 Web UI 自动化 Agent，核心理念是：
The GUI Agent Living in Your Webpage. Control web interfaces with natural language.
与传统 Web 自动化工具（如 Playwright、Selenium）的本质区别：
| 维度 | 传统方案 | Page Agent |
|---|---|---|
| 运行位置 | 服务端/本地脚本 | 网页内部（纯 JS） |
| 依赖 | 浏览器驱动/扩展 | 无（仅 script 标签） |
| 多模态 | 常需截图+视觉模型 | 纯 DOM 文本分析 |
| 集成成本 | 高（需后端改造） | 极低（一行 script） |
| LLM | 通常服务端调用 | 支持自定义（BYO LLM） |
核心使用场景：
Page Agent 采用 Monorepo（npm workspaces） 架构，核心包分工如下：
packages/
├── page-controller/ # DOM 操控层（点击、输入、滚动等）
├── llms/ # LLM 调用封装（支持 OpenAI 兼容接口）
├── core/ # 核心 Agent 逻辑（规划 + 执行循环）
├── page-agent/ # 主包，对外暴露 PageAgent 类
├── ui/ # 内置聊天 UI 组件
├── extension/ # Chrome 扩展（多页面任务）
└── mcp/ # MCP Server（Beta）
与传统视觉方案（截图 + GPT-4V）不同，Page Agent 完全基于 DOM 文本分析：
browser-use 的方案）page-controller 包在页面内直接执行 DOM 操作这种方式的好处是：
tabs.captureVisibleTab 等）项目在 LICENSE 中明确说明，DOM 处理组件和 prompt 派生自 browser-use：
DOM processing components and prompt are derived from browser-use. PageAgent is designed for client-side web enhancement, not server-side automation.
关键区别：browser-use 是 服务端 Python 自动化，Page Agent 是 客户端 JS 增强。
从 package.json 和 tsconfig 可以看出项目对 TypeScript 类型检查的要求：
"scripts": {
"typecheck": "tsc --noEmit -p tsconfig.typecheck.json && tsc --noEmit -p packages/extension/tsconfig.json"
}
ESLint 配置中虽然关闭了大量 @typescript-eslint 规则（为了开发效率），但保留了 typecheck 脚本作为 CI 门禁，这是一个务实的工程实践。
使用官方提供的免费测试 LLM（仅评估用途）：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/page-agent.demo.js" crossorigin="true"></script>
国内镜像：
<script src="https://registry.npmmirror.com/page-agent/1.10.0/files/dist/iife/page-agent.demo.js" crossorigin="true"></script>
加载后页面会自动出现 Demo Agent 聊天界面。
⚠️ 该 Demo CDN 使用免费测试 LLM API，仅用于技术评估。
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('点击登录按钮')
适用于需要跨 Tab 操作的场景（如"在 Google 搜索某个内容，然后打开第一个结果并提交表单"）：
npm run dev:ext
# 然后在 Chrome 加载扩展
import { PageAgent } from 'page-agent'
const agent = new PageAgent({
model: 'gpt-4o',
baseURL: 'https://api.openai.com/v1',
apiKey: 'sk-...',
language: 'en-US',
})
// 执行单个指令
await agent.execute('Fill in the email field with [email protected]')
// 执行多步任务
await agent.execute('Search for "Page Agent" on GitHub, then star the repo')
Page Agent 支持任何 OpenAI 兼容接口，这意味着可以接入：
baseURL: 'http://localhost:11434/v1'）const agent = new PageAgent({
model: 'deepseek-chat',
baseURL: 'https://api.deepseek.com/v1',
apiKey: 'sk-...',
language: 'zh-CN',
// 可选：自定义系统提示
systemPrompt: '你是一个专业的 Web 自动化助手...',
})
只需在产品中引入 script，即可为用户提供自然语言操作能力：
<script>
window.addEventListener('load', () => {
const agent = new window.PageAgent({
model: 'your-model',
baseURL: 'your-api-endpoint',
apiKey: 'your-key',
// 不自动弹出 UI，手动控制
autoInit: false,
})
// 绑定到产品的"AI 助手"按钮
document.getElementById('ai-btn').onclick = () => agent.execute('Help me...')
})
</script>
不能。 官方明确说明该 Demo API 仅用于技术评估，生产环境请使用自己的 LLM API Key。
纯脚本模式受同源策略限制，只能操作当前页面。跨页面/跨域需要配合 Chrome 扩展 使用。
任何 OpenAI 兼容 API 都支持。官方测试过：GPT-4o、Qwen 3.5+、DeepSeek V3。
| 场景 | 推荐方案 |
|---|---|
| 需要后端定时爬取数据 | Playwright |
| SaaS 产品内嵌 AI 助手 | Page Agent |
| 需要用户实时交互 | Page Agent |
| 需要绕过反爬机制 | Playwright |
项目使用 tseslint.configs.recommendedTypeChecked + strictTypeChecked，类型覆盖率较高。Monorepo 各子包均有独立的 tsconfig.json。
Page Agent 最大的创新点在于把 GUI Agent 从服务端搬到了客户端——这让 Web 应用的 AI 化改造成本从"重写后端"降到"加一行 script"，对于想快速给产品加上 AI Copilot 的团队来说，是一个非常务实的选择。
项目目前 v1.10.0，MIT 协议，由阿里巴巴团队维护。如果你正在做 SaaS 产品的 AI 化，或者需要一个轻量的 Web 自动化方案，值得一试。
相关链接：
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。