📄 文档管理系统

← 返回列表

pi-web:这个界面让我爱上了 Pi Agent

技术文章 #pi #pi-web #AI编程工具 #coding agent #开源 #浏览器界面 📅 创建:2026-05-29 04:07:35 🔄 更新:2026-05-28 20:12:07
👁️ 预览 & 复制到公众号 ✏️ 编辑

如果你的日常就是 Claude Code / OpenCode 敲命令跑任务,pi-web 不是一个必需品。

但如果你像我一样,会在一个项目里同时开多个对话分支、经常需要回溯之前的思路、或者想让团队成员也能直接查看 AI 对话过程——那你应该认真看一下这个项目。

它解决的不是"能不能用"的问题,是"用起来顺不顺手"的问题。


pi 的原始界面是什么样的

在说 pi-web 之前,先说回 pi 本身。

pi 是那个 slogan 叫「There are many agent harnesses, but this one is yours」的开源编程智能体。默认跑在终端里,交互方式和其他 CLI 工具差不多——输入指令,等返回,再输入。

这个交互模式对于简单的 coding 任务是够用的。但当你开始用它处理复杂需求的时候,几个问题就开始出现了:

这些问题不是 pi 本身的 bug,是终端交互模式的天然局限——它擅长处理线性流程,但不擅长展示、分支和回溯。


pi-web 做了什么

pi-web 是 agegr 用 Next.js 写的 pi 前端界面,Stars 321,MIT 开源协议,直接 npx @agegr/pi-web@latest 就能跑,端口默认 30141。

它不是一个重写的 pi,也不是 fork。它是 pi 的可视化外壳。

README 里的功能列表读起来很朴素,但实际用下来,几个功能是真正有用的:

会话浏览器

侧边栏按工作目录分组展示所有 pi 会话。这解决了第一个问题——不需要靠记忆去翻历史记录,目录结构直接告诉你这个对话是在哪个项目里发生的。

分支导航器(BranchNavigator + ChatMinimap)

这是最有价值的一个功能。pi 的对话本质上是树状的——你可以从任意节点分叉出去,也可以回退到任意节点继续。终端里看这个树只能靠脑子脑补,pi-web 直接给你画出来。

minimap 在右侧,可以看到整条对话链的缩略图;branch navigator 可以点击切换分支。切分支的体验接近 Git,但对象是对话而不是代码。

模型中途切换

对话中途可以换模型,不用开新会话。这个在调试 prompt 的时候比较有用——同一条指令丢给不同模型看效果,不用重新复制粘贴。

工具面板

可以控制智能体能调用哪些工具。这个适合在某些场景下做权限限制——比如只想让它读文件、不想让它执行命令的时候。

压缩会话

长对话做摘要,节省上下文窗口。这个功能在处理复杂 Debug 流程的时候比较实用。


怎么选:终端还是 pi-web

这里不存在哪个更好的问题,只有场景适配。

pi(终端) pi-web(浏览器)
启动速度 依赖本地服务
分支可视化 无,纯脑补 有,minimap + 导航器
多人协作查看 不支持 可以分享浏览器地址
文件浏览 内置文件浏览器
适合人群 命令行熟练工 需要跟踪复杂思路的开发者
依赖 仅 pi 本身 pi + Node.js

我的感受是:如果你现在用 pi 主要就是单个任务、单条思路、跑完就结束,那终端模式完全够用,pi-web 带来的复杂度是多余的。

但如果你的工作流已经开始出现多分支、回溯、团队共享这些需求,pi-web 解决的是真实痛点,而不是锦上添花。


怎么跑起来

# 直接跑(不需要手动安装)
npx @agegr/pi-web@latest

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

# 自定义端口
pi-web --port 8080

启动后打开 http://localhost:30141,默认读取 ~/.pi/agent/sessions 下的会话文件。如果 pi 本身还没配置过模型,需要先在 pi 里把 API Key 配好。


写在最后

pi-web 不是来替代任何工具的。它补的是 pi 在「复杂对话」场景下的短板。

如果你还没用过 pi,先跑通 pi 本身;如果你已经在用 pi 但被多分支对话折磨过,可以试试这个界面。

你在用 pi 吗?有没有遇到过多分支对话管理的问题?评论区说说。

💬 评论区

加载中...