其实，

如何用一行代码建立AI网页代理？

从不如换个方向来看，把 Agent 完整地放进网页里跑。

PageAgent 是一个实验性的纯前端 GUI Agent 库。它运行在你的页面中，直接操作界面。无需后端，无需截图，无需无头浏览器。还可以通过一个可选的插件控制整个浏览器。

⭐ GitHub｜MIT 开源

一行代码

传统方案的部署方法是：安装 Python → 安装 Playwright → 跑一个 Docker → 启动一个无头浏览器 → 截图 → 调 LLM → 解析 → 执行。

PageAgent 的部署方法：

Done.

用 npm 接入一样简洁：

更多接入方式见官方文档。

By Frontend。For Frontend

这个架构差异带来的不只是部署便利，而是角色反转。说起来，

Playwright、browser-use 这类工具的模式是 "外部控制" —— 你的应用是作的对象。你无法决定 Agent 看到什么、能做什么。 就是把你的产品暴露给了另一个自动化程序。

PageAgent 的模式是 "内部运行" —— Agent 是你应用的一部分，你决定它的能力边界、它看到的数据范围、它使用的模型。你的应用不是被人操控的木偶，而是自己拥有了 AI 能力。

这代表着什么？怎么说呢，作为前端开发者，你可以：

• 在你的 SaaS 产品里内嵌一个 AI 助手，使用者用自然语言完成复杂操作
• 给公司后台的 ERP/CRM 加上智能导航，代替 步点击流程
• 把 Agent 接到你现有的客服 bot 后面 —— 它不再是告诉使用者 "点击右上角的提交按钮"。而是直接帮他点了

是你的网页在驱动浏览器，你网页内的 Agent 可以将 PageAgentExt 作为 Tool 来控制使用者的整个浏览器。

const result = await window.PAGEAGENTEXT.execute => updateUI,})

这打开了后端爬虫方案做不到的场景：公司采购程序自动下单 —— 使用者登录着供应商门户。Agent 直接走下单流程 公司差旅预订 —— 在公司的差旅程序里操作实际的预订流程，而不是去爬公开票价 *项目管理自动化 —— 在团队的项目看板上直接创建任务，不需要 API 对接`

 

模块化




立刻体验🏃‍♂️


在线 Demo —— 无需注册，打开就能体验。也可以把 bookmarklet拖到书签栏，在任意网站上试试。

⭐ GitHub —— MIT 开源，欢迎 Star 和 PR。

接入文档 —— CDN 、npm 、编程式接入教程。


PageAgent 基于 MIT协议开源。Demo站点提供的免费测试 API仅供体验评估，生产环境请使用自己的LLM API Key。使用条款