Page Agent

生活在网页中的图形用户界面代理（GUI Agent）。使用自然语言控制网页界面。

🌐 English | 中文

🚀 示例 | 📖 文档 | 📢 HN 讨论 | 𝕏 在 X 上关注

---

✨ 特性

• 🎯 简单集成
  • 不需要 浏览器扩展 / Python / 无头浏览器。
  • 只需页面内 JavaScript。一切都在您的网页中完成。
• 📖 基于文本的 DOM 操作
  • 不需要截图，也不需要多模态大语言模型（LLMs）或特殊权限。
• 🧠 使用您自己的 LLMs
• 🐙 可选的 Chrome 扩展 用于多页面任务
  • 还有一个 MCP 服务器 (Beta)，可以从外部控制它。

💡 使用场景

• SaaS AI 助手 — 用几行代码在您的产品中部署一个 AI 助手，无需后端重写。
• 智能表单填写 — 将 20 次点击的工作流简化为一句话。非常适合 ERP、CRM 和管理系统。
• 无障碍访问 — 通过自然语言让任何 Web 应用变得无障碍。支持语音命令、屏幕阅读器，零障碍。
• 多页面代理 — 通过 Chrome 扩展 扩展您自己的 Web 代理到多个浏览器标签页。
• MCP - 允许您的代理客户端控制您的浏览器。

🚀 快速开始

一行代码集成

最快的方式是通过我们的免费 Demo LLM 来尝试 PageAgent：

<script src="{URL}" crossorigin="true"></script>

⚠️ 仅用于技术评估。 此演示 CDN 使用我们的免费 测试 LLM API。使用它即表示您同意其 条款。

镜像	URL
全球	https://cdn.jsdelivr.net/npm/page-agent@1.6.2/dist/iife/page-agent.demo.js
中国	https://registry.npmmirror.com/page-agent/1.6.2/files/dist/iife/page-agent.demo.js

NPM 安装

npm install page-agent

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: 'en-US',
})

await agent.execute('点击登录按钮')

更多编程用法，请参阅 📖 文档。

🤝 贡献

我们欢迎社区的贡献！请按照 CONTRIBUTING.md 中的说明进行设置和遵循指南。

在提交问题或 PR 之前，请阅读 维护者说明 和 行为准则。

完全由 机器人或代理 生成且没有实质性人类参与的贡献将 不被接受。

⚖️ 许可证

MIT 许可证

👏 致谢

本项目基于 browser-use 的优秀工作构建。

PageAgent 专为 客户端网页增强 设计，而非服务端自动化。

DOM 处理组件和提示来源于 browser-use：

Browser Use <https://github.com/browser-use/browser-use>
版权所有 (c) 2024 Gregor Zunic
根据 MIT 许可证授权

我们衷心感谢 browser-use 项目及其贡献者在网页自动化和 DOM 交互模式方面的出色工作，
这使得本项目成为可能。

🌟 精彩的 Page Agent 项目

用 PageAgent 构建了很酷的东西？添加到这里！打开 PR 分享您的项目。

这些是社区项目 —— 我们不维护或背书。请自行决定使用。

项目	描述
您的项目？	打开 PR 🙌

---

⭐ 如果您觉得 PageAgent 有帮助，请给这个仓库点个星！

Page Agent 快速上手指南

Page Agent 是一个嵌入网页的 GUI 智能代理工具，可以通过自然语言控制网页界面。

---

环境准备

• 系统要求: 支持现代浏览器（如 Chrome、Firefox、Edge 等）。
• 前置依赖:
  • Node.js (推荐版本 >= 16)
  • npm 或 yarn
  • 需要一个 LLM API Key（如 Qwen API Key）

---

安装步骤

方法一：通过 NPM 安装

npm install page-agent

方法二：通过 CDN 快速加载

在 HTML 文件中直接引入以下脚本：

<script src="https://registry.npmmirror.com/page-agent/1.6.2/files/dist/iife/page-agent.demo.js" crossorigin="true"></script>

注意: 上述 CDN 使用免费测试 LLM API，仅适用于技术评估。使用前请阅读 服务条款。

---

基本使用

示例 1：通过 NPM 使用

以下代码展示了如何初始化 PageAgent 并执行简单操作：

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: 'en-US',
})

await agent.execute('Click the login button')

示例 2：通过 CDN 使用

在 HTML 文件中直接调用 PageAgent：

<script>
  const agent = new PageAgent({
      model: 'qwen3.5-plus',
      baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
      apiKey: 'YOUR_API_KEY',
      language: 'zh-CN',
  })

  agent.execute('点击登录按钮')
</script>

---

更多文档

如需了解更多高级用法，请参考 官方文档。

---

⭐ 如果你觉得 Page Agent 有帮助，请为项目点个 Star！