pi-web：给 Pi 编码 Agent 加一个浏览器界面，比终端更直观

2026-05-26T14:00:00+08:00

pi-webPiAI AgentWeb UI开源编码工具

Pi 编码 Agent 很强，但它是一个终端 TUI。终端里看代码 diff、切分支、浏览会话历史，效率有限。

pi-web 用一行命令给 Pi 加上浏览器界面——会话浏览器、实时对话、分支导航、模型切换、文件浏览，全部在网页里完成。

一行启动，零配置

npx @agegr/pi-web@latest

打开 http://localhost:30141，开始使用。不需要安装 Pi，不需要配置数据库。

全局安装方式：

npm install -g @agegr/pi-web
pi-web

自定义端口和主机：

pi-web --port 8080 --hostname 127.0.0.1
# 或
PORT=8080 pi-web

核心功能

会话浏览器

按工作目录分组展示所有 Pi 会话。每个会话显示时间戳、模型、消息数。点击进入查看完整对话历史。

~/projects/my-app/
  ├── 2026-05-26_10-30_abc123.jsonl   ← 点击打开
  ├── 2026-05-25_14-22_def456.jsonl
  └── 2026-05-24_09-15_ghi789.jsonl

~/projects/another-project/
  ├── 2026-05-26_08-00_jkl012.jsonl
  └── ...

实时对话

通过 SSE（Server-Sent Events）流式输出，在浏览器中与 Agent 实时交互。和终端体验一样，但在更大的屏幕上——看代码、读 diff、查输出更方便。

会话分叉

从任意用户消息创建独立的新会话分支。想试一个不同的方案？从中间某条消息分叉出去，不破坏原会话。

会话内分支

回退到会话中的任意节点继续对话。和 Pi 终端里的 /tree 功能对应，但用可视化方式展示分支树，点击切换。

分支导航器

同一个会话的多个分支用可视化导航器展示。看到每条分支的走向，一键跳转到任意分支节点。

模型切换

对话中途随时切换模型。侧边栏的 Models 面板列出所有可用模型，点击切换。数据从 Pi 的 models.json 读取，也可以在面板中直接编辑。

工具面板

控制 Agent 可以使用哪些工具。勾选启用、取消禁用，按需调整 Agent 的能力范围。

压缩会话

长会话接近上下文窗口时，一键触发压缩。Agent 对旧消息生成摘要，释放 token 空间。

引导 / 追加

Agent 正在运行时，你可以：

引导（Steer）：打断 Agent，发送修正指令（当前工具执行完后中断）
追加（Follow-up）：等 Agent 完成后自动追加消息

文件浏览器

侧边栏内置文件浏览器，在标签页中查看当前工作目录下的文件。不需要切换到编辑器就能看文件内容。

技术架构

层	技术
前端	Next.js 16 + React 19 + Tailwind CSS 4
代码高亮	react-syntax-highlighter
Markdown 渲染	react-markdown + remark-gfm
模型图标	@lobehub/icons
运行时	直接引用 Pi 的 SDK（`@earendil-works/pi-ai`、`@earendil-works/pi-coding-agent`）

项目结构：

app/
  api/
    sessions/        # 读写会话文件
    agent/           # 发送命令、SSE 事件流
    files/           # 文件内容读取
    models/          # 可用模型列表
    models-config/   # 读写 models.json
components/
  AppShell.tsx       # 主布局
  ChatWindow.tsx     # 对话窗口
  ChatInput.tsx      # 输入框
  ChatMinimap.tsx    # 对话缩略图
  MessageView.tsx    # 消息渲染
  BranchNavigator.tsx # 分支导航
  SessionSidebar.tsx  # 会话侧边栏
  FileExplorer.tsx    # 文件浏览器
  FileViewer.tsx      # 文件查看器
  ToolPanel.tsx       # 工具面板
  ModelsConfig.tsx    # 模型配置
  TabBar.tsx          # 标签栏
lib/
  session-reader.ts   # 解析 .jsonl 会话文件
  rpc-manager.ts      # 管理 AgentSession 生命周期
  normalize.ts        # 规范化 toolCall 字段名

数据存储

pi-web 不创建自己的数据存储，直接读取 Pi 的会话文件：

~/.pi/agent/sessions/<编码后的工作目录>/<时间戳>_.jsonl

也可以通过环境变量 PI_CODING_AGENT_DIR 指定其他目录。

适用场景

大屏编码：在显示器上用浏览器和 Agent 对话，比终端窗口更宽敞
会话回溯：浏览器里浏览历史会话、搜索旧对话，比终端翻页更方便
分支管理：可视化查看和切换会话分支，试不同方案不迷路
多人协作：部署到服务器上，团队成员通过浏览器共享 Agent 会话
Pi 新手：不熟悉终端 TUI 的用户，通过网页界面入门更容易

作者: itech001 来源: 公众号：AI人工智能时代网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。

本文首发于 AI人工智能时代，转载请注明出处。