对 Pi CLI 有了初步了解后,由于官方没有出 Pi 桌面端应用,对于不太习惯 TUI(终端用户界面)的小伙伴来说体验还是不友好的。最近探索到一个不错的 Pi GUI 可视化项目,推荐给喜欢可视化交互的用户。
优势:一行命令启动无需额外配置、可视化配置和交互操作
限制:需要 Node.js 22.19 及以上版本、新建会话和页面刷新时交互有点瑕疵
Pi Web 是 Pi 编程智能体的本地可视化网页界面。它会读取本机的 Pi 会话文件,在浏览器里提供会话管理、实时对话、模型配置、技能管理和项目文件预览。

安装与启动
环境要求: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 --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。

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

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

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

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

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


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

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

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

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

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

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

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


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


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

有订阅的小伙伴可以走订阅,使用中转的小伙伴可以选择自定义配置,点击【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 的提供商配置界面也能很好地满足。