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 直接可视化，一眼看出改了啥。

📊 使用统计面板

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

🌙 暗黑模式

更多功能一览

三、安装与使用

前置条件

方式一：让 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 就能直接读/写该目录下的文件。

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

💡 图片上传的三种方式

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

💡 @ 引用文件

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

💡 Git Checkpoint 救命功能

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

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

💡 权限策略

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

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

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

💡 编辑消息 / 重新生成

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

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

五、技术栈

架构图：

浏览器 ──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 / 建议都欢迎。