10+年产品经理专注分享AI 工具、AI 资讯、AI Coding、Vibe Coding与下一代产品创新,按 Ctrl+D 收藏我们
关于我 留言板 小程序 标签云

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
    • AI开源项目
    • AI智能体
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
    • AI开源项目
    • AI智能体
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
当前位置: 首页 » AI学习教程

Pi Web部署实操体验教程,Pi CLI 的可视化网页界面,让 AI 编程更直观

4小时前 AI学习教程 32 0

对 Pi CLI 有了初步了解后,由于官方没有出 Pi 桌面端应用,对于不太习惯 TUI(终端用户界面)的小伙伴来说体验还是不友好的。最近探索到一个不错的 Pi GUI 可视化项目,推荐给喜欢可视化交互的用户。

优势:一行命令启动无需额外配置、可视化配置和交互操作

限制:需要 Node.js 22.19 及以上版本、新建会话和页面刷新时交互有点瑕疵

Pi Web 是 Pi 编程智能体的本地可视化网页界面。它会读取本机的 Pi 会话文件,在浏览器里提供会话管理、实时对话、模型配置、技能管理和项目文件预览。

Pi Web GitHub

安装与启动

环境要求:Node.js 22.19 及以上版本

# 直接运行
npx @agegr/pi-web@latest

# 全局安装
npm install -g @agegr/pi-web@latest

# 卸载
npm uninstall -g @agegr/pi-web

启动命令:

pi-web

Pi Web 启动

在浏览器中打开后界面如下,正常读取了项目信息和历史会话信息。

Pi Web 主界面

对端口和主机有要求的小伙伴也可以指定:

pi-web --port 8080 --hostname 0.0.0.0
# 或简写
pi-web -p 8080 -H 0.0.0.0

服务启动成功后会默认打开浏览器,如果不希望自动打开可以配置 --no-open 参数。

项目配置

Pi Web 提供多项目配置,默认打开执行 pi-web 的项目路径。

项目配置

提供了使用默认目录和自定义路径两种方式:

  • 使用默认目录:使用临时目录作为工作区
  • 自定义路径:从本地选择目录作为工作区

默认目录

自定义路径

聊天对话

Pi Web 的对话框界面,右上方展示 Pi Web 和 Pi CLI 版本信息。

对话框

选择图片可以从本地选择图片上下文,点击【模型】可以查看配置的模型列表。

图片上下文

点击【推理级别】可以选择推理等级模式。

推理级别

点击【工具预设】配置内置工具。

工具预设

Pi Web 提供了【完成提示音】功能,开启后在任务完成后会播放提示音。

完成提示音

输入 ! 同样可以进入 bash。

bash

输入 @ 可以选择文件上下文。

文件上下文

输入 / 可以选择扩展、工具和技能。

扩展/工具/技能

任务执行过程中,可以在界面上方查看上下文窗口信息,在聊天框进行提示词引导。

上下文窗口信息

Pi Web 右侧提供了对话索引,当对话轮数多时可以通过对话索引快速定位对话。

对话索引

点击顶部【完整历史】可以查看会话完整提示词和工具调用过程。

完整历史

完整历史详情

会话管理

Pi Web 启动后默认会拉取工作区所有的会话记录。

会话记录

点击【新建】可以创建新的会话,点击具体的会话记录可以恢复会话详情。

新建会话

鼠标悬浮到会话上可以对会话进行重命名和删除操作。

重命名删除

项目管理

在左下角【文件浏览器】可以查看项目工作区文件列表。

文件浏览器

点击文件可以查看文件具体内容。

查看文件

文件浏览器提供了提及和下载文件功能,点击可以将文件快速添加到聊天对话框或下载到本地。

下载文件

【文件变更】可以查看文件变更记录,【上传文件】可以将本地文件上传到工作区。

文件变更

上传文件

提供商管理

点击底部【模型】打开提供商配置界面。

提供商配置

提供商界面

点击【添加 Provider】添加新提供商,Pi Web 提供了自定义配置、订阅服务和API Key 3 种配置方式。

添加 Provider

有订阅的小伙伴可以走订阅,使用中转的小伙伴可以选择自定义配置,点击【OpenAI / Anthropic compatible】添加自定义配置,输入提供商名称、Base URL、API Key,选择【API 请求格式】,最后点击【导入模型】获取模型列表。

自定义配置

点击【导入模型】会获取模型列表,选择需要的模型点击【添加所选模型】即可将模型添加到提供商模型列表。

导入模型

添加模型

模型配置

点击模型可以查看和配置模型信息,可以配置模型支持思考、图片输入、上下文窗口大小等。

Skill 管理

点击底部【技能】打开技能列表,默认会加载全局和项目级别的技能,可以对技能进行启用和禁用。

技能列表

Pi Web 支持从 skills.sh 根据关键词检索安装技能。

搜索技能

输入关键词点击【搜索】检索技能,选择安装到全局(global)或者项目(project)。

安装技能

安装成功后,安装的技能会在【SKILLS.SH】分组下展示,技能会被存放到 ~/.pi/agent/skills 目录下。

已安装技能

使用也很简单,直接在对话框输入 /技能名称 即可检索到技能。

使用技能

插件管理

点击底部【插件】打开插件安装列表,在插件详情可以对插件进行更新、重新加载会话、删除等操作。

插件列表

点击【添加插件】可以安装插件,可以到官方插件平台 pi.dev/packages 查找,也可以自己创建。

添加插件

输入插件安装地址,以 @liziy/token-stats 为例,安装命令为 pi install npm:@liziy/token-stats,选择安装到全局(global)或者项目(project),最后点击【安装】。

安装插件

安装成功后就会在插件列表展示。

插件安装成功

写在最后

Pi Web 为 Pi CLI 提供了一个友好的可视化入口,对于不习惯终端操作的用户来说,大大降低了使用门槛。从会话管理、模型配置到技能和插件的安装管理,所有操作都能在浏览器中完成。如果你有订阅或者使用中转的需求,Pi Web 的提供商配置界面也能很好地满足。

GitHub: agegr/pi-web

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
未经允许不得转载:Pi Web部署实操体验教程,Pi CLI 的可视化网页界面,让 AI 编程更直观
#Pi Web #可视化 #AI编程 #开源工具 
收藏 1
InkOS:9.5K Star 的开源 AI 长篇小说写作框架
huashu-mac-use:开源 Mac 电脑操控 Skill,让 Agent 不靠点击也能操作 App
推荐阅读
  • 手把手教你免费白嫖一台云服务器并轻松部署 OpenClaw 完整指南
  • 手把手教安装使用 Codex 入门指南,App、插件、CLI 三种方式完整教程
  • 笔记也能变现,教你用飞书的AI知识库打造自动化收入流实操教程
  • Obsidian 网页版来了:NAS 部署 Ignis,浏览器直接使用
  • 手把手教你搭建 n8n + 公众号文章自动采集管理器(附 Zeabur 快速上手指南)
评论 (0)
请登录后发表评论
分类精选
Cursor永久免费攻略:无限邮箱注册+重置机器码+Cursor试用期重置工具实现永久免费使用
51320 1年前
手把手教你如何使用扣子Coze搭建“文生图” AI Bot
22300 2年前
n8n新手入门指南:5 分钟本地部署 + 中文汉化 + 快速启动,玩转工作流(Docker版)
20546 1年前
安装字节Trae登录提示App Unavailable(应用程序不可用)解决办法,这份官方指南请收好!
19823 1年前
手把手教你用国内VISA信用卡直接订阅ChatGPT、Claude、Google Gemini等海外AI服务
19080 7月前
零基础上手 VSCode + Claude Code + GLM-4.6 保姆级安装配置教程
18519 10月前
AI 概念篇:Token是什么?一文讲清楚Token分词、窗口、计费与常用计算工具
17914 8月前
Gemini CLI 装好了,登录异常怎么办?手把手教你解决 Gemini CLI 登录问题
17836 1年前
一文搞懂什么是 Vibe Coding?Vibe Coding工具推荐及Cursor编程开发实践
16377 1年前
手把手教你使用 Gemini 2.5 Pro 免费 API搭建本地知识库,一键接入 Gemini!
15876 1年前

文章目录

关注「苏米客」公众号

订阅推送更及时,手机查看更方便
分类排行
1 Pi Web部署实操体验教程,Pi CLI 的可视化网页界面,让 AI 编程更直观
2 Grok Bot 保姆级教程:AI 执行型助手全解析,从会员升级到创建你的第一个 AI 队友
3 豆包电脑版实测:从聊天到 AI 工作台,文件整理/报销/PPT 生成全流程体验
4 不用视频模型也能加字幕:Doubao-Seed-Evolving + ffmpeg 实测教程
5 豆包工作8个技巧:飞书Agent实测指南
6 小红书图文自动排版Skill教程:基于IP的专属排版工厂
7 Seedance 2.5 + 世界模型:告别反复抽卡的 AI 视频制作新方法
8 WorkBuddy + SRT 白板动画 Skill:零门槛制作手绘风格解说视频
9 Chrome 本地 4GB AI 模型一键关闭教程:官方下载条件更新详解
10 Claude Code 和 Codex 作为 DeepSeek Harness 子 Agent 实战:几分钟上手部署教程
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6
微信文章助手 程序库 免费影视APP 免费字体下载 产品经理导航 爱克硕儿 产品经理AI资讯 Axure元件库下载 申请友联