Claude Code 太难看我开源了一个 Web GUIAnthropic 官方的 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 工具并排 DiffClaude 改文件时红绿 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 目录 启动成功后告诉我访问地址完成后浏览器打开http://127.0.0.1:8765即可。方式二手动安装一条命令pip install claude-web-ui claude-web # 浏览器打开 http://127.0.0.1:8765前置条件已装 Claude Code CLInpm 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 就能直接读/写该目录下的文件。不填默认是~/用户主目录。 图片上传的三种方式点输入框左边 按钮选文件直接CtrlV/⌘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/stdoutCLI 包装依赖claudeCLI透过 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.dbSQLite对话事件流 →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-webIssue / PR / 建议都欢迎。《网络安全从零到精通全套学习大礼包》96节从入门到精通的全套视频教程免费领取如果你也想通过学网络安全技术去帮助就业和转行我可以把我自己亲自录制的96节 从零基础到精通的视频教程以及配套学习资料无偿分享给你。网络安全学习路线图想要学习 网络安全作为新手一定要先按照路线图学习方向不对努力白费。对于从来没有接触过网络安全的同学我帮大家准备了从零基础到精通学习成长路线图以及学习规划。可以说是最科学最系统的学习路线大家跟着这个路线图学习准没错。配套实战项目/源码所有视频教程所涉及的实战项目和项目源码学习电子书籍学习网络安全必看的书籍和文章的PDF市面上网络安全书籍确实太多了这些是我精选出来的面试真题/经验以上资料如何领取以上资料如何领取