npm install page-agent如何3分钟完成网页GUI智能体安装与初始化的完整教程【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agentpage-agent是一个纯 JavaScript 实现的网页 GUI 智能体GUI Agent——执行一条npm install page-agent命令就能让 AI 以自然语言操作你的网页界面点击按钮、填写表单、切换页面全程不需要浏览器插件、Python 或无头浏览器。本文面向新手完整讲解NPM 安装与初始化配置的全部步骤帮你把 20 次点击的繁琐流程变成一句话。为什么选择 NPM 安装 page-agent 相比其他集成方式NPM 安装是长期使用的首选核心优势如下对比维度NPM 安装其他方案模型接入✅ 可自由接入任意主流 LLM含本地模型受限于 Demo 环境构建集成✅ 随项目打包版本可控依赖外部 CDN定制能力✅ 可配置语言、步骤上限、自定义工具能力受限适用场景生产环境、SaaS 产品嵌入快速尝鲜 page-agent 基于文本化 DOM 操作无需截图和多模态模型普通语言模型即可驱动接入成本很低。第 1 步环境检查与一键安装安装前检查清单 ✅Node.js 建议22.22 或 24npm 建议11.6仓库 package.json 中engines字段已声明该要求一个可访问的 LLM API KeyOpenAI 兼容接口即可前端项目React / Vue / 原生 JS 均可一条命令完成安装在终端中执行npm install page-agent安装完成即代表核心依赖就绪。注意page-agent对zod有peer 依赖^3.25.0 || ^4.0.0若你的项目未安装还需补一条npm install zod当前稳定版本为1.12.3版本演进详情可查阅 docs/CHANGELOG.md。第 2 步初始化 PageAgent 实例最快配置方法打开项目中的入口 JS 文件只需 4 行代码完成初始化import { PageAgent } from page-agent const agent new PageAgent({ model: qwen3.5-plus, // 你的 LLM 模型名 baseURL: https://dashscope.aliyuncs.com/compatible-mode/v1, apiKey: YOUR_API_KEY, // 替换为你的密钥 language: zh-CN, // 界面语言 })关键配置项速查表 ⚙️配置项作用默认值model指定 LLM 模型名称必填baseURLLLM 服务地址OpenAI 兼容格式必填apiKey模型 API 密钥必填languageUI 面板语言支持zh-CN/en-US—maxSteps单个任务最大执行步数防止失控40customTools扩展或覆盖内置工具—maxSteps等完整配置项定义见 packages/core/src/types.ts。初始化时PageAgent会同时创建页内 DOM 控制器和可视化 UI 面板面板会自动悬浮显示在页面上用户可直接对话下达任务实现逻辑在 packages/page-agent/src/PageAgent.ts。第 3 步执行第一个自然语言任务 实例创建后调用execute方法即可下达指令await agent.execute(点击登录按钮)随后观察页面智能体会自动解析页面 DOM、规划操作步骤并逐一执行点击、输入、滚动等UI 面板实时展示执行进度。任务完成或失败后结果可通过agent.lastResult读取。常见问题快速排查 ❓Q1提示zod缺失page-agent 将其设为 peer 依赖执行npm install zod即可。Q2任务执行到一半停止默认maxSteps为 40复杂多步任务可显式调大该值。Q3想换成本地模型如 Ollama将baseURL指向本地服务的 OpenAI 兼容端点即可无需改动其他配置本地开发配置示例见 docs/developer-guide.md。Q4中文界面不生效确认language: zh-CN面板 i18n 由 packages/ui/src/i18n/locales.ts 提供。项目模块路径与延伸阅读 page-agent 是一个 npm workspaces 管理的 monorepo各模块职责清晰按需深入模块路径职责主入口含 UI 面板packages/page-agent/npm 包page-agent核心 Agent 逻辑无 UIpackages/core/任务循环与工具调度DOM 操作与视觉反馈packages/page-controller/独立于 LLM 的页面控制LLM 客户端packages/llms/思考-行动反思模型MCP 服务器packages/mcp/外部 Agent 控制浏览器浏览器扩展多页面任务packages/extension/跨标签页协作安装与开发工作流docs/developer-guide.md中文项目说明docs/README-zh.md行为准则docs/CODE_OF_CONDUCT.md小结3 步上线你的网页 GUI 智能体 安装npm install page-agent缺 zod 则补装初始化4 行代码创建PageAgent实例配置模型与语言执行agent.execute(一句话任务)坐看 AI 操作网页无需后端改造几行代码即可为你的 SaaS 产品加上 AI 副驾驶——这就是 page-agent 的一句话操作网页体验现在就可以在你的项目里跑起来。【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 npm install page-agent：如何3分钟完成网页GUI智能体安装与初始化的完整教程
npm install page-agent如何3分钟完成网页GUI智能体安装与初始化的完整教程【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agentpage-agent是一个纯 JavaScript 实现的网页 GUI 智能体GUI Agent——执行一条npm install page-agent命令就能让 AI 以自然语言操作你的网页界面点击按钮、填写表单、切换页面全程不需要浏览器插件、Python 或无头浏览器。本文面向新手完整讲解NPM 安装与初始化配置的全部步骤帮你把 20 次点击的繁琐流程变成一句话。为什么选择 NPM 安装 page-agent 相比其他集成方式NPM 安装是长期使用的首选核心优势如下对比维度NPM 安装其他方案模型接入✅ 可自由接入任意主流 LLM含本地模型受限于 Demo 环境构建集成✅ 随项目打包版本可控依赖外部 CDN定制能力✅ 可配置语言、步骤上限、自定义工具能力受限适用场景生产环境、SaaS 产品嵌入快速尝鲜 page-agent 基于文本化 DOM 操作无需截图和多模态模型普通语言模型即可驱动接入成本很低。第 1 步环境检查与一键安装安装前检查清单 ✅Node.js 建议22.22 或 24npm 建议11.6仓库 package.json 中engines字段已声明该要求一个可访问的 LLM API KeyOpenAI 兼容接口即可前端项目React / Vue / 原生 JS 均可一条命令完成安装在终端中执行npm install page-agent安装完成即代表核心依赖就绪。注意page-agent对zod有peer 依赖^3.25.0 || ^4.0.0若你的项目未安装还需补一条npm install zod当前稳定版本为1.12.3版本演进详情可查阅 docs/CHANGELOG.md。第 2 步初始化 PageAgent 实例最快配置方法打开项目中的入口 JS 文件只需 4 行代码完成初始化import { PageAgent } from page-agent const agent new PageAgent({ model: qwen3.5-plus, // 你的 LLM 模型名 baseURL: https://dashscope.aliyuncs.com/compatible-mode/v1, apiKey: YOUR_API_KEY, // 替换为你的密钥 language: zh-CN, // 界面语言 })关键配置项速查表 ⚙️配置项作用默认值model指定 LLM 模型名称必填baseURLLLM 服务地址OpenAI 兼容格式必填apiKey模型 API 密钥必填languageUI 面板语言支持zh-CN/en-US—maxSteps单个任务最大执行步数防止失控40customTools扩展或覆盖内置工具—maxSteps等完整配置项定义见 packages/core/src/types.ts。初始化时PageAgent会同时创建页内 DOM 控制器和可视化 UI 面板面板会自动悬浮显示在页面上用户可直接对话下达任务实现逻辑在 packages/page-agent/src/PageAgent.ts。第 3 步执行第一个自然语言任务 实例创建后调用execute方法即可下达指令await agent.execute(点击登录按钮)随后观察页面智能体会自动解析页面 DOM、规划操作步骤并逐一执行点击、输入、滚动等UI 面板实时展示执行进度。任务完成或失败后结果可通过agent.lastResult读取。常见问题快速排查 ❓Q1提示zod缺失page-agent 将其设为 peer 依赖执行npm install zod即可。Q2任务执行到一半停止默认maxSteps为 40复杂多步任务可显式调大该值。Q3想换成本地模型如 Ollama将baseURL指向本地服务的 OpenAI 兼容端点即可无需改动其他配置本地开发配置示例见 docs/developer-guide.md。Q4中文界面不生效确认language: zh-CN面板 i18n 由 packages/ui/src/i18n/locales.ts 提供。项目模块路径与延伸阅读 page-agent 是一个 npm workspaces 管理的 monorepo各模块职责清晰按需深入模块路径职责主入口含 UI 面板packages/page-agent/npm 包page-agent核心 Agent 逻辑无 UIpackages/core/任务循环与工具调度DOM 操作与视觉反馈packages/page-controller/独立于 LLM 的页面控制LLM 客户端packages/llms/思考-行动反思模型MCP 服务器packages/mcp/外部 Agent 控制浏览器浏览器扩展多页面任务packages/extension/跨标签页协作安装与开发工作流docs/developer-guide.md中文项目说明docs/README-zh.md行为准则docs/CODE_OF_CONDUCT.md小结3 步上线你的网页 GUI 智能体 安装npm install page-agent缺 zod 则补装初始化4 行代码创建PageAgent实例配置模型与语言执行agent.execute(一句话任务)坐看 AI 操作网页无需后端改造几行代码即可为你的 SaaS 产品加上 AI 副驾驶——这就是 page-agent 的一句话操作网页体验现在就可以在你的项目里跑起来。【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考