PageAgent:一行代码为你的网页装上AI大脑,让任何网页“听懂人话”
- 2026-09-24 23:29:53
PageAgent:一行代码为你的网页装上AI大脑,让任何网页“听懂人话”
20次点击才能填完的表单，现在一句话搞定 需要跨页面查资料？Agent自己就能跨标签页干活 想让SaaS产品秒变智能，却不想重写后端？ PageAgent 来了——一个纯客户端、零依赖的AI代理库，让你用一行代码，为任何网页注入“灵魂”。 什么是 PageAgent？ PageAgent 是一个极简的 JavaScript 库，它能在任何网页中注入一个 AI 代理（Agent），让网页能够理解自然语言指令并自动执行操作。无论是点击按钮、填写表单，还是跨页面整理数据，都只需一句话。 它的核心理念是： 让网页交互从“手动操作”进化到“语言指挥” ，而且这一切都不需要浏览器插件、无头浏览器或多模态模型——纯页面内 JavaScript，轻量到让你惊讶。 项目由社区驱动，基于著名的 browser-use 项目构建，但做了彻底的客户端化改造，专为 网页增强 而非服务端自动化设计。 为什么是 PageAgent？四大特性让你欲罢不能 🎯 特性一：轻松集成，拒绝“胶水代码” 你不需要安装任何浏览器插件，不需要搭建 Python 环境，更不需要启动无头浏览器。 只需一行 HTML 标签 ，就能在你的网页中激活一个 AI 代理： 或者通过 NPM 安装，几行代码就能让代理执行任务： 零后端、零配置 ——这才是开发者想要的“开箱即用”。 📖 特性二：基于文本的 DOM 操作，无需多模态 传统的网页自动化要么依赖截图（需要多模态模型），要么需要浏览器插件权限。PageAgent 另辟蹊径：它直接读取页面的 DOM 结构，将其转化为文本表示，然后利用 LLM 的语义理解能力，精准定位要操作的元素。 这意味着： 🧠 特性三：用自己的 LLM，数据隐私无忧 PageAgent 不绑定任何特定的模型服务。你可以自由选择： 只需配置 baseURL和 apiKey ，代理就会使用你指定的模型进行决策。 你的数据，你做主 。 🎨 特性四：精美 UI，人机协同的典范 PageAgent 不仅是一个“沉默的 API”，它还提供了一个优雅的交互界面。当代理执行任务时，你可以实时看到它的思考过程和每一步操作。如果代理不确定，它会主动向你提问，寻求确认——这就是真正的“人机协同”。 它能做什么？四大场景，颠覆想象 
1️⃣ SaaS AI 副驾驶 —— 为你的产品加上“智能助手” 你是 SaaS 创业者，想让产品拥有类似 Salesforce Einstein 的智能能力，却不想重写后端？PageAgent 是你的救星。 几行代码，你的管理后台就拥有了一个“AI 副驾驶”。用户可以说： 所有操作都在前端完成， 无需 API 改造，无需数据库变更 。PageAgent 会像人类一样操作你的界面。 2️⃣ 智能表单填写 —— 把 20 次点击变成一句话 ERP、CRM、企业级后台，这些系统的表单往往又长又复杂。现在，用户只需说： “填写一个新员工入职信息：王芳，产品经理，入职日期下周一” PageAgent 会自动定位到姓名、职位、日期字段，一一填入，然后点击提交。 效率提升 10 倍，用户体验飙升 。 3️⃣ 无障碍增强 —— 让任何网页都能“听懂人话” 对于视障用户或老年人，操作复杂的网页是一大挑战。PageAgent 可以成为他们的“数字拐杖”： 无需特殊的无障碍适配，任何网页都能瞬间获得“语言交互”能力。 4️⃣ 跨页面 Agent —— 让 AI 自己“上网冲浪” 通过可选的 Chrome 扩展，PageAgent 可以突破单页限制，在多个标签页之间协调工作。你可以对它说： “打开三个招聘网站，搜索‘前端开发’岗位，把结果整理成一个表格” 代理会自动打开新标签页，执行搜索，收集信息，最后整合结果—— 真正的“个人数字助理” 。 快速上手：从零到“智能网页”只需 1分钟 方式一：CDN 尝鲜（适合技术评估） 在任意 HTML 页面中引入以下脚本： ⚠️ 注意：这个 Demo CDN 使用了免费的测试 LLM API，仅供体验。生产环境请配置自己的模型。 方式二：NPM 安装（生产推荐） 然后在你需要的地方初始化代理： 方式三：Chrome 扩展（跨页面任务） 从 Chrome 网上应用店安装 PageAgent 扩展（即将上线），即可获得跨标签页的 Agent 能力。 技术揭秘：它是如何工作的？ PageAgent 的核心工作流程如下： 整个过程完全在客户端完成，不经过任何服务器中转，确保数据隐私。 项目致敬了 browser-use 在 DOM 交互模式上的优秀设计，并在此基础上进行了纯前端适配和 UI 增强。 社区与贡献 PageAgent 是一个开源项目，欢迎所有人参与贡献。你可以： 项目地址： https://github.com/alibaba/page-agent（请替换为实际地址） ⚠️ 项目不接受完全由 Bot 或 Agent 自动生成的代码，我们珍视每一个人类的真实贡献。 结语：让网页交互进入“自然语言时代” 从命令行界面，到图形界面，再到触摸界面——人机交互的每一次演进，都让数字世界离普通人更近一步。现在，PageAgent 试图开启下一个时代： 语言界面时代 。 任何网页，无论新旧，无论架构，都能瞬间获得“听懂人话”的能力。对于开发者，这是为产品注入 AI 能力的最短路径；对于用户，这是与数字世界交互的最自然方式。 一行代码，让你的网页拥有灵魂。 你会用 PageAgent 做什么？欢迎在评论区分享你的创意～
PART 01
PART 02
<scriptsrc="https://cdn.jsdelivr.net/npm/page-agent@1.5.7/dist/iife/page-agent.demo.js"crossorigin="true"></script>import { PageAgent } from'page-agent'constagent=newPageAgent({model: 'qwen3.5-plus',baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',apiKey: 'YOUR_API_KEY',language: 'zh-CN',})awaitagent.execute('点击登录按钮')
无需截图 ，节省带宽和计算资源
无需多模态模型 ，普通的文本 LLM 就够用
无需特殊权限 ，纯前端运行，安全可控
本地部署的 Ollama
国内厂商的 API（如阿里云 dashscope、智谱 AI）
OpenAI 兼容的任何服务
PART 03
“把最近三个订单的状态改为已发货”
“创建一个新的客户，名字叫李雷，邮箱是 leilei@example.com ”
“导出这个季度的销售报表”
语音指令：“把字体调大”
“朗读这个区域的内容”
“帮我找到购物车并下单”
PART 04
<scriptsrc="https://cdn.jsdelivr.net/npm/page-agent@1.5.7/dist/iife/page-agent.demo.js"crossorigin="true"></script>npm install page-agentimport { PageAgent } from'page-agent'constagent=newPageAgent({model: 'qwen3.5-plus',baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',apiKey: 'sk-xxxxx',language: 'zh-CN',})// 让代理执行任务awaitagent.execute('点击右上角的登录按钮')
PART 05
DOM 序列化 ：将当前页面的 DOM 树转换为结构化的文本表示，包括元素标签、属性、文本内容、位置关系等。 指令理解 ：将用户指令（自然语言）和 DOM 文本表示一起发送给 LLM。 动作决策 ：LLM 分析上下文，决定下一步要执行的动作（点击、输入、滚动等），并定位到具体的 DOM 元素。 执行与反馈 ：PageAgent 在浏览器中执行对应操作，并观察页面变化，必要时进行多轮交互。 人机协同 ：如果遇到歧义或高风险操作，代理会暂停并请求用户确认。
PART 06
在 GitHub 上提交 issue 或 PR
完善文档或翻译
开发更多应用场景示例
PART 07
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
