Claude Code 太难看？我开源了一个 Web GUI

Anthropic 官方的 Claude Code 只有命令行版本，用着虽然强但体验欠一点。于是我花了两天写了个开源的 Web GUI，支持多会话、图片上传、Token 级流式、Git Checkpoint 回滚、暗黑模式等 20+ 特性，零密钥配置，今天把它开源到 GitHub 了。

🔗 GitHub 仓库 ：https://github.com/heng1234/claude-web

一、这是个啥？

Claude Code 是 Anthropic（开发 Claude 的公司）官方出的命令行 AI 编程工具，能直接读你的代码、改文件、跑命令，是对标 Cursor / Windsurf 的强力武器。

但它只有 CLI（命令行界面）。对于习惯图形界面的人来说：

看长对话要一直往上翻
工具调用的结果密密麻麻混在一起
图片没法贴
多个会话切换麻烦

所以我做了这个 Claude Web ------ 一个给 claude CLI 套了漂亮外壳的本地 Web 应用。

和官方 CLI 的关系

复制代码

浏览器 (UI)  ←→  FastAPI (Python 后端)  ←→  subprocess 调用本地 claude CLI  ←→  Anthropic

关键：这工具不存任何 API Key ------它只是帮你在终端敲 claude -p "..."，复用你本机 CLI 已经登录的账号。账单走你自己的 Anthropic 订阅，数据不过第三方。

二、功能预览

✨ Token 级流式输出

像 ChatGPT 一样一个字一个字打出来，不是等整段再显示。

✂️ Edit 工具并排 Diff

Claude 改文件时，红绿 diff 直接可视化，一眼看出改了啥。

📊 使用统计面板

每日成本柱图 + 工具使用排行 + 总消耗追踪。

🌙 暗黑模式

类别	功能
💬 对话	Token 级流式、多轮续接（`--resume`）、停止按钮
📝 输入	文本 / 图片（文件/粘贴/拖拽）/ `@` 引用文件 / Token 估算 / 草稿保存 / 提示词模板
🎨 渲染	Markdown + 代码高亮 / 工具调用图标化 / Mermaid 图 / LaTeX 公式 / 图片 Lightbox
🗂 会话管理	📌置顶 / 📥归档 / 🏷标签 / 🪄AI 智能命名 / 双击重命名 / 搜索 / 导出 Markdown
🛡 安全	权限策略（自由/只读/计划/自定义）· Git Checkpoint 一键回滚 · 会话分叉（编辑/重新生成）
⚙️ 其它	模型切换（Opus/Sonnet/Haiku）· 系统提示词 · ⌘K 搜索 · ⌘N 新会话 · 浏览器通知 · 移动端适配

三、安装与使用

前置条件

本机已装 Claude Code CLI 并登录过 ：

复制代码

npm install -g @anthropic-ai/claude-code
claude  # 首次登录，按提示授权

Python 3.9 或更高版本

方式一：让 Claude Code 自己装（推荐 🎉）

最有爱的方式------用 Claude Code 给 Claude Code 装 Web UI。

打开终端进入 claude 交互模式：

复制代码

claude

把这段话丢给它：

复制代码

帮我安装 https://github.com/heng1234/claude-web 到 ~/claude-web 目录：
1. git clone 到 ~/claude-web
2. 在该目录下创建 Python 虚拟环境 .venv 并激活
3. pip install -r requirements.txt
4. 最后 python server.py 启动服务
启动成功后告诉我访问地址

Claude 会自动执行 clone、建 venv、装依赖、启服务。完成后浏览器打开 http://127.0.0.1:8765 即可。

方式二：手动安装（三条命令）

复制代码

# 1. 克隆项目
git clone https://github.com/heng1234/claude-web.git
cd claude-web

# 2. 建虚拟环境并装依赖
python3 -m venv .venv
source .venv/bin/activate      # Windows 用户: .venv\Scripts\activate
pip install -r requirements.txt

# 3. 启动
python server.py

终端会显示：

复制代码

INFO:     Started server process [xxxx]
INFO:     Uvicorn running on http://127.0.0.1:8765

浏览器打开 http://127.0.0.1:8765 就可以开始用了。

自定义端口

复制代码

PORT=9000 python server.py

局域网共享（给同事/室友用）

修改 server.py 最后一行：

复制代码

uvicorn.run(app, host="0.0.0.0", port=port)  # 原来是 127.0.0.1

对方访问 http://你的内网IP:8765 即可。⚠️ 别直接暴露到公网，当前版本没有鉴权。

四、使用技巧

💡 工作目录的意义

页面顶部有个"工作目录"输入框------这是告诉 Claude "你在哪个文件夹里工作"。填上你的项目路径，Claude 就能直接读/写该目录下的文件。

不填默认是 ~/（用户主目录）。

💡 图片上传的三种方式

点输入框左边 📎 按钮选文件
直接 Ctrl+V / ⌘+V 粘贴截图
拖拽图片到输入框

发送后 Claude 会自动用 Read 工具读取图片内容，对视觉分析任务很方便。

💡 `@` 引用文件

输入框里敲 @，会弹出当前工作目录下的文件选择器。↑↓ 方向键选择，Enter 插入完整路径。

💡 Git Checkpoint 救命功能

只要你的工作目录是 git 仓库 ，每轮对话前会自动创建 checkpoint（基于 git stash create）。

万一 Claude 把代码改坏了，点那一轮用户消息左边的 ⏪ 按钮，一键恢复文件到对话前状态。对话历史不受影响，可以继续聊。

💡 权限策略

顶部下拉菜单选"权限策略"：

🔓 自由：默认，所有工具可用
✏️ 允许编辑 ：自动接受文件编辑（--permission-mode acceptEdits）
📋 计划：只规划不执行（--permission-mode plan）
🔒 只读：禁用 Bash/Write/Edit 等写工具
⚙️ 自定义：勾选允许的工具列表

对不信任的任务建议先切"计划"或"只读"。

💡 编辑消息 / 重新生成

鼠标悬停在任意用户消息左侧会出现 ✏️ 按钮------点它可以修改内容并重新提问。助手消息右侧的 🔄 则是重新生成回答。

这两个操作都是 分叉式 的：会创建新会话，原会话保留不动，方便对比两个版本。

五、技术栈

层	技术
后端	Python 3.9+ · FastAPI · uvicorn · SQLite
前端	原生 JS（零构建） · TailwindCSS · marked.js · highlight.js · Mermaid · KaTeX · Chart.js
通信	Server-Sent Events（流式）· 子进程 stdin/stdout（CLI 包装）
依赖	`claude` CLI（透过 subprocess 调用，不直连 API）

架构图：

复制代码

浏览器 ──POST /api/chat──> FastAPI
                            └─ asyncio.subprocess: claude -p \
                                --output-format stream-json \
                                --include-partial-messages \
                                [--session-id | --resume] \
                                [--permission-mode | --allowed-tools]
                               └─ stdout JSON lines ──SSE──> 浏览器渲染

其中 --include-partial-messages 开启了 token 级流式，前端通过解析 content_block_delta 事件实现打字机效果。

六、常见问题

Q1：需要配置 API Key 吗？

不需要 。本工具通过 subprocess 调用本地 claude 命令，复用 CLI 的登录态（存在 ~/.claude/ 目录）。只要你能在终端正常跑 claude，本工具就能用。

Q2：支持 Windows 和 Linux 吗？

Linux：完全支持
Windows ：能跑，但"停止按钮"在 Windows 上可能不生效（SIGTERM 兼容性问题），后续会优化
macOS：开发平台，最佳体验

Q3：数据存在哪？

全部存本机：

会话元数据 → claude-web.db（SQLite）
对话事件流 → history/{session_id}.jsonl
上传的图片 → uploads/

不上传到任何第三方服务。

Q4：为什么不用 React/Vue？

追求"零构建，clone 即跑"。单页应用逻辑不复杂，原生 JS 够用，用户不需要装 Node、不需要 npm install。

Q5：未来会加啥？

Roadmap 里排着：

Artifacts 侧边预览（HTML/React 实时渲染）
PDF/CSV/Word 上传
MCP server 管理面板
Slash 命令透传（/compact /clear）
导入 ~/.claude/projects/ 原生会话
简单鉴权（Token / 密码）
内嵌终端（xterm.js）

七、结语

这个工具解决了我自己用 Claude Code 时的真实痛点------不用一直盯着终端，浏览器里优雅地多会话切换、查历史、看图、回滚、改消息、看统计。

两天做完，开源，免费。

🌟 如果对你有用，麻烦去 GitHub 点个 Star 鼓励一下 ： 👉 https://github.com/heng1234/claude-web

Issue / PR / 建议都欢迎。

Claude Code 太难看？我开源了一个 Web GUI

一、这是个啥？

和官方 CLI 的关系

二、功能预览

✨ Token 级流式输出

✂️ Edit 工具并排 Diff

📊 使用统计面板

🌙 暗黑模式

更多功能一览

三、安装与使用

前置条件

方式一：让 Claude Code 自己装（推荐 🎉）

方式二：手动安装（三条命令）

自定义端口

局域网共享（给同事/室友用）

四、使用技巧

💡 工作目录的意义

💡 图片上传的三种方式

💡 @ 引用文件

💡 Git Checkpoint 救命功能

💡 权限策略

💡 编辑消息 / 重新生成

五、技术栈

六、常见问题

Q1：需要配置 API Key 吗？

Q2：支持 Windows 和 Linux 吗？

Q3：数据存在哪？

Q4：为什么不用 React/Vue？

Q5：未来会加啥？

七、结语

💡 `@` 引用文件