只要我们能善用时间，就永远不愁时间不够用。——德国诗人歌德

Page Agent

Page Agent Banner

License: MIT
TypeScript
Downloads
Bundle Size
GitHub stars

JavaScript in-page GUI agent. Control web interfaces with natural language.

他是谁：住在网页里的 GUI Agent

Page Agent 有点像那种“已经在你页面里租好房子”的小助手——不是浏览器扩展那种住隔壁的，也不是 python 脚本那种在远方给你打电话的，更不是 headless browser 那种披着隐身斗篷在后台乱窜的。

他是那种会直接站在你的网页里，理一理领带，拍拍胸口说：

The GUI Agent Living in Your Webpage. Control web interfaces with natural language.

你对他说一句人话，他就替你把网页界面“按按钮、填表单、点链接、做流程”这类事儿办得明明白白。

他甚至还准备了几个入口，像是在门口举牌指路：

👉 🚀 Demo
👉 📖 Documentation
👉 📢 Join HN Discussion

页面里还有一段演示视频，他不喜欢空口说白话，喜欢“你看，我真的能动”：

✨ Features：他有哪些“招牌本事”

Page Agent 的技能树很清晰，而且每一条都像是他在自夸，但又确实让人心动。

🎯 Easy integration：上岗速度快，入职手续少

他把行李往你网页里一放就能干活：

  • 不需要 browser extension / python / headless browser
  • 只需要页面内的 JavaScript
  • 一切都发生在你的网页里

他特别像那种“我不挑环境，只要给我一块地方我就开干”的同事。

📖 Text-based DOM manipulation：不看截图，只看文字和结构

他不走“截屏识图”那条路，他走文本路线：

  • 不需要 screenshots
  • 不需要多模态 LLM
  • 不需要特殊权限

他更像一个懂 DOM、会读页面结构的老派工程师：
“我不靠眼睛看，我靠脑子理解。”

🧠 Bring your own LLMs：你带模型，他带本事

Page Agent 不强迫你只用某一种模型。你想带谁来上班，都行。

🎨 Pretty UI with human-in-the-loop：漂亮，还愿意让你插手

他不是那种“我全自动，你别管”的机器人，他更像“我先做，你来确认”的合作型伙伴。界面好看，也愿意让人参与决策。

🐙 Optional chrome extension：跨页面任务？他也能长出触手

如果你要做多页面、多 tab 的任务，他还可以选配一个 chrome extension，当作“出差装备”：

💡 Use Cases：他最擅长去哪儿打工

Page Agent 不是那种“什么都能做但什么都做不精”的万金油，他更像一个知道自己价值的职业选手。

SaaS AI Copilot：给你的产品塞一个 AI 副驾驶

他会说：

“我可以让你用几行代码，把 AI Copilot 放进产品里。别让我改你后端，我只在前端就把活干了。”

  • Ship an AI copilot in your product in lines of code.
  • No backend rewrite.

Smart Form Filling：把 20 次点击变成一句话

在 ERP、CRM、后台管理系统这类地方，他特别来劲——那些“点点点、填填填”的流程，他看着就想替你做完：

  • Turn 20-click workflows into one sentence.
  • Perfect for ERP, CRM, and admin systems.

Accessibility：让网页会“听人话”

他愿意当无障碍的桥梁，让任何 web app 可以通过自然语言被操作：

  • Voice commands
  • Screen readers
  • zero barrier

Multi-page Agent：跨 tab 的长流程，他也愿意跑腿

配上可选的 chrome extension，他能把触角伸到多个浏览器标���页：

  • Extend your own agent’s reach across browser tabs

🚀 Quick Start：让他住进你的网页（他已经迫不及待了）

Page Agent 最喜欢的部分，就是“上岗”。

One-line integration：一行集成，最快体验（用免费 Demo LLM）

他说：“你只要给我一个 script 标签，我就开始动。”

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

他还给你准备好了两个镜像地址，像是在递给你两把钥匙：一把全球通用，一把更适合中国网络环境。

Mirrors URL
Global https://cdn.jsdelivr.net/npm/page-agent@1.5.6/dist/iife/page-agent.demo.js
China https://registry.npmmirror.com/page-agent/1.5.6/files/dist/iife/page-agent.demo.js

NPM Installation：正式入职（npm 安装）

如果你想认真把他纳入项目依赖，他会规规矩矩站好：

1
npm install page-agent

然后在代码里把他请出来，给他安排模型、地址、钥匙、语言，他就能开始执行你的“人类指令”。

1
2
3
4
5
6
7
8
9
10
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')

他听到这句 Click the login button 的时候，基本就是一个字：
“懂。”

想要更程序化、更深入的用法？他指了指门牌：

For more programmatic usage, see 📖 Documentations.

🤝 Contributing：他欢迎你来一起打磨性格

Page Agent 不是独行侠，他愿意和社区一起成长：

但他也有明确的原则：
如果你的贡献完全由 bots 或 agents 生成、缺乏实质的人类参与——他会拒绝，并且可能会把机器人账号拉黑。

他像个认真维护秩序的开源项目维护者，语气不狠，但立场很清晰。

👏 Acknowledgments：他承认自己站在巨人的肩膀上

Page Agent 很坦荡，他说自己建立在 browser-use 的优秀工作之上：

This project builds upon the excellent work of browser-use.

并且他强调自己的定位很明确：

PageAgent is designed for client-side web enhancement, not server-side automation.

他把致谢和许可证信息写得很完整，像是郑重鞠躬之后递上一张名片，告诉你：
“我从哪里来，我尊重谁，我遵循什么规则。”

📄 License：他穿着 MIT 的外套

MIT License

结尾：他希望你把他留在你的网页里

Page Agent 不太喜欢被当成“炫技工具”，他更希望自己变成你产品里那个“会做事”的角色：

  • 让用户用一句话完成复杂界面操作
  • 让后台系统不再需要一堆点击教学
  • 让无障碍能力自然融入交互
  • 让 AI 从聊天框走进真正的 GUI 世界

他把最后一句话写得很直白，也很像他的性格：做完事，还会抬头问一句“要不要给我点个赞”。

⭐ Star this repo if you find PageAgent helpful!

Star History Chart