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

Claude Code 只有命令行？我给它写了个 Web UI，现在 pip install claude-web-ui 一条命令就能用。支持图片识别、文档上传、代码运行、Git 回滚、权限重试等 30+ 特性，完全开源。

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

---

一、这是个啥？

Claude Code 是 Anthropic 官方的命令行 AI 编程工具，能直接读代码、改文件、跑命令。但它只有 CLI 界面——看长对话要翻屏、工具调用混在一起、图片没法贴、多会话切换麻烦。

Claude Code Web 就是给它套了个漂亮的 Web 外壳：

浏览器 ←→ FastAPI 后端 ←→ subprocess 调用本地 claude CLI ←→ Anthropic API

零密钥配置——复用你本机 CLI 的登录态，不接触任何 API Key。

---

二、功能预览

✨ Token 级流式输出

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

✂️ Edit 工具并排 Diff

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

📊 使用统计面板

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

🌙 暗黑模式

更多功能一览

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

---

三、安装与使用

前置条件

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

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

2. Python 3.9 或更高版本

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

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

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

claude

把这段话丢给它：

帮我安装 https://github.com/heng1234/claude-web 到 ~/claude-web 目录：
启动成功后告诉我访问地址

完成后浏览器打开 http://127.0.0.1:8765 即可。

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

pip install claude-web-ui
claude-web
# 浏览器打开 http://127.0.0.1:8765

前置条件：已装 Claude Code CLI（npm install -g @anthropic-ai/claude-code && claude）+ Python 3.9+。

更多启动选项：

claude-web --port 9000        # 自定义端口
claude-web --open             # 启动后自动开浏览器
claude-web --host 0.0.0.0     # 局域网共享
claude-web --version          # 查看版本

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

---

四、使用技巧

💡 工作目录的意义

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

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

💡 图片上传的三种方式

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

发送后 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 / 建议都欢迎。