一行脚本让网页拥有AI操作员page-agent 项目终极入门指南【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agentpage-agent 是一个纯 JavaScript 实现的页面内嵌式 GUI Agent只需一行script脚本就能让你的网页拥有自己的 AI 操作员用自然语言点击按钮、填写表单、完成复杂工作流。无需浏览器插件、无需 Python、无需无头浏览器一切都在网页内完成。本指南带你快速上手这款来自阿里巴巴的开源 Web AI 操作工具。为什么需要 page-agent传统浏览器自动化如 Selenium、Playwright 或 browser-use通常运行在页面之外需要后端服务、无头浏览器或多模态视觉模型。而 page-agent 走了一条不同的路——GUI Agent 直接住在你的网页里一行脚本集成CDN 引入或 NPM 安装几行代码即可运行基于文本的 DOM 操作不需要截图、不需要视觉模型纯文本 DOM 分析实现精准操作自带 LLM 即可工作支持主流大模型也包括本地部署模型可选 Chrome 扩展支持跨标签页的多页面任务还有 MCP Server 可供外部 Agent 控制它的目标用户是网站开发者把 AI 能力注入自己的产品让最终用户用一句话完成任务。四大典型应用场景page-agent 最适合这类点击很密集的场景SaaS AI Copilot—— 几行代码给产品加上 AI 副驾驶无需重写后端智能表单填写—— 把 20 次点击变成一句话ERP、CRM、管理后台的最佳拍档无障碍增强—— 用自然语言让任何网页可访问支持语音指令和屏幕阅读器跨页面 Agent—— 通过可选 Chrome 扩展让 Agent 跨标签页工作一个生动的例子客服机器人不再说请先点击设置按钮然后点击…而是直接替用户现场操作页面。最快上手一行脚本体验 AI 操作员方式一一行脚本快速体验推荐新手最快的试用方式是把下面这行脚本加到你的 HTML 页面中script srchttps://cdn.jsdelivr.net/npm/page-agent1.12.3/dist/iife/page-agent.demo.js crossoriginanonymous /script页面加载后右下角会出现一个对话面板直接用自然语言指挥它点击登录按钮、把用户名填为张三……即可看到效果。⚠️ 注意Demo CDN 使用的是免费测试 LLM API仅用于技术评估。在国内访问 jsDelivr 不便时可改用 npmmirror 镜像地址见 README-zh.md 中的说明。在 URL 后加?autoInitfalse可只加载脚本而不自动初始化。方式二NPM 安装生产推荐正式集成到你的项目时推荐通过 NPM 安装并配置自己的 LLMnpm install page-agentimport { 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(点击提交按钮然后填写用户名为张三)两种用法程序化执行await agent.execute(自然语言指令)由你的代码驱动 Agent面板交互agent.panel.show()显示对话面板让用户自己输入指令项目结构一览读懂源码只需 5 分钟page-agent 采用 monorepo 架构核心代码分布在 packages/ 目录下模块路径职责核心 Agentpackages/core/src/PageAgentCore.tsAgent 主循环理解任务并调用工具页面控制packages/page-controller/src/PageController.ts分析 DOM、执行点击/输入等操作对外入口packages/page-agent/src/PageAgent.ts组合 Core 控制器 UI 面板对话面板packages/ui/src/panel/Panel.ts页面内嵌的用户交互面板LLM 客户端packages/llms/src/OpenAIClient.ts兼容 OpenAI 协议的大模型调用Chrome 扩展packages/extension/多标签页控制、历史记录等扩展能力MCP Serverpackages/mcp/让外部 Agent 客户端控制浏览器理解这三个核心文件就能看懂整个系统PageAgent.ts 在构造函数中创建PageController负责手和Panel负责嘴再交给PageAgentCore负责脑驱动整个任务循环。Demo 入口 demo.ts 则展示了如何用 IIFE 脚本自动初始化并挂载到window.PageAgent。进阶玩法自定义工具与安全控制除了内置的点击、输入、滚动等工具page-agent 还支持自定义工具让 AI 调用你的业务逻辑如加购、查询内部知识库并可覆盖或移除内置工具如禁止执行 JavaScript。相关文档见 docs/ 目录完整开发者指南参见 developer-guide.md。安全方面项目提供了操作黑白名单机制数据脱敏保护敏感信息注入自定义知识库让 AI 按你的规则工作更多特性细节可在文档站源码中查看例如 自定义工具文档、能力边界说明。常见问题page-agent 的边界在哪它和 browser-use 有什么区别page-agent 是页面内嵌组件面向网站开发者做用户体验增强操作范围是当前页面browser-use 是外部自动化工具面向爬虫/Agent 开发者控制整个浏览器。能跨标签页吗核心库PageAgent.js为单页/SPA 场景设计需要跨标签页时安装可选的 Chrome 扩展PageAgentExt即可新建/切换/关闭标签页。支持哪些模型主流 LLM 均可包括本地部署模型也提供免费的测试 API 供体验。支持列表见官方文档的 Models 页面。适合生产环境吗Demo CDN 仅限技术评估生产环境请通过 NPM 安装并接入自己的 LLM 端点。总结给网页装上 AI 操作员只需 3 步粘贴一行script或npm install page-agent配置你的 LLM模型名、baseURL、apiKey执行指令或展示面板让 AI 替用户操作页面page-agent 用纯前端方案重新定义了GUI Agent的集成方式——没有后端、没有插件、没有截图一行脚本让网页开口说话、动手操作。如果你想给产品加上 AI 副驾驶或把繁琐的 B 端操作变成一句话现在就是最好的起点。【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考