尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
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),仅供参考
RELATED

相关推荐

AWS CLI `budgets delete-budget` 实战指南:用 AWS CLI 删除成本与用量预算

AWS CLI `budgets delete-budget` 实战指南:用 AWS CLI 删除成本与用量预算

AWS CLI budgets delete-budget 实战指南:用 AWS CLI 删除成本与用量预算 【免费下载链接】aws-cli Universal Command Line Interface for Amazon Web Services 项目地址: https://gitcode.com/GitHub_Trending/aw/aws-cli 导读 本文围绕 AWS CLI&#xff…

📅 2026/9/15 19:00:37
Seerr 集成 Pushover 推送通知完整指南:从应用注册、Token 配置到消息发送源码解析

Seerr 集成 Pushover 推送通知完整指南:从应用注册、Token 配置到消息发送源码解析

Seerr 集成 Pushover 推送通知完整指南:从应用注册、Token 配置到消息发送源码解析 【免费下载链接】seerr Open-source media request and discovery manager for Jellyfin, Plex, and Emby. 项目地址: https://gitcode.com/GitHub_Trending/je/seerr Seerr…

📅 2026/9/15 19:00:37
IoT-For-Beginners 零售项目实战:在 Wio Terminal 上调用 Custom Vision 对象检测器完成货架库存识别

IoT-For-Beginners 零售项目实战:在 Wio Terminal 上调用 Custom Vision 对象检测器完成货架库存识别

IoT-For-Beginners 零售项目实战:在 Wio Terminal 上调用 Custom Vision 对象检测器完成货架库存识别 【免费下载链接】IoT-For-Beginners 12 Weeks, 24 Lessons, IoT for All! 项目地址: https://gitcode.com/GitHub_Trending/io/IoT-For-Beginners 本篇技术…

📅 2026/9/15 18:55:37
MORE NEWS

更多资讯

📰

如何部署 DINOv3:把零样本视觉特征接入生产

如何部署 DINOv3:把零样本视觉特征接入生产 【免费下载链接】dinov3 Reference PyTorch implementation and models for DINOv3 项目地址: https://gitcode.com/GitHub_Trending/di/dinov3 DINOv3 是 Meta 自监督视觉基础模型的参考实现:它提供训…

📰

中文LDA主题建模实战:用pyLDAvis验证与优化主题质量

把几千条中文文本丢进 LDA 模型,拟合速度往往很快,词表看起来也像模像样,可真要拿去向业务方汇报,或者写成结项材料,经常会卡在同一个地方:怎么证明这些主题是靠谱的?早期我在这个环节吃过不少亏…

📰

思绪思维导图:开源思维导图 simple-mind-map 的免费使用与二次开发指南

思绪思维导图:开源思维导图 simple-mind-map 的免费使用与二次开发指南 【免费下载链接】mind-map SimpleMindMap(思绪思维导图):一个强大的思维导图。A powerful mind map. 项目地址: https://gitcode.com/GitHub_Trending/mi/…

📰

Pyroscope 演进史:从 Grafana Phlare 0.1 到 v2 连续性能剖析平台的版本变迁解读

Pyroscope 演进史:从 Grafana Phlare 0.1 到 v2 连续性能剖析平台的版本变迁解读 【免费下载链接】pyroscope Continuous Profiling Platform. Debug performance issues down to a single line of code 项目地址: https://gitcode.com/GitHub_Trending/py/pyrosc…

📰

免费手写笔记软件 Rnote 完整指南:5 分钟装好,从课堂速记到 PDF 批注

免费手写笔记软件 Rnote 完整指南:5 分钟装好,从课堂速记到 PDF 批注 【免费下载链接】rnote Sketch and take handwritten notes. 项目地址: https://gitcode.com/GitHub_Trending/rn/rnote Rnote 是一个免费开源的手写笔记工具,数字…

📰

SpringBoot高校班级管理系统开发实践与优化

1. 项目背景与核心需求河北水利电力学院班级事务管理系统是一个基于SpringBoot框架开发的高校班级综合管理平台。这类系统在高校信息化建设中具有典型意义——随着高校管理精细化程度提升,传统纸质或Excel表格管理方式已无法满足班级事务、学生服务、教学协同等需求…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬