震惊，Github开源，真正让程序员效率提升 90%的AI辅助工具来啦！！！

嗨，我是小华同学，专注解锁高效工作与前沿AI工具！每日精选开源技术、实战技巧，助你省时50%、领先他人一步。👉免费订阅，与10万+技术人共享升级秘籍！

Claude Code Viewer 是一个基于浏览器的客户端工具，专为 Claude Code 项目日志可视化和交互操作设计。它帮助你「查看会话日志／启动新会话／恢复旧会话／浏览项目内容」——一站式管理 Claude Code 对话历史与项目。

为何需要 Claude Code Viewer？

在使用 Claude Code（一个在终端运行、理解你的项目、协助编码的 AI 工具）时，你可能会遇到以下痛点：

• 在命令行里切换项目、查看历史会话、查找某次对话的细节，体验较差。
• 项目里多个子会话、子流程（比如 agent 调用工具、子任务）时，日志变得杂乱，难以理顺逻辑。
• 想在浏览器里远程查看 Claude Code 会话或从手机操作，但 CLI 或终端界面限制了场景。
• 想快速浏览已执行 .git 变更、diff、工具调用情况，但命令行工具视图受限。

而 Claude Code Viewer 正是为缓解上述痛点而生：把繁杂的 ~/.claude 会话日志转成可浏览、可交互的网页视图，实现「一键启动／浏览／恢复」等操作。正如一位开发者所言：

换言之，如果你希望将 Claude Code 的黑盒终端体验，转化为可视化、可操作、网页化的体验，那么这个项目正好切中需求。

核心功能盘点

会话日志实时查看

将 Claude Code 在 ~/.claude/projects/<project>/<session-id>.jsonl 中生成的 JSONL 日志，实时解析并在浏览器中展示会话数据：用户输入、AI 响应、工具调用、thinking 阶段、子会话详情。
你可以快速查到「某次对话里 agent 调用了什么工具」「执行了多少命令」「子会话跳转路径」等细节。

启动／继续会话

不只是查看日志，你还可以在浏览器中通过 Claude Code Viewer 启动新的 chat 会话，或从既有会话继续运行（Resume）。 比如：在某个 project 里选择「新建会话」——然后就可以通过网页界面输入提示，而不是回到终端。

项目／会话目录导航

在 UI 中列出多个项目、会话 Session ID、切换会话、查看历史，这大大提升多项目、多任务管理的效率。

文件上传及预览

在 chat 界面可以上传图片（PNG, JPEG, GIF, WebP）、PDF、文本文件，UI 支持原生预览：图片直接显示，PDF 嵌入查看，文本格式化。
这意味着你可以在 Claude Code 会话中上传截图、说明文档、日志等资料并浏览。

Git Diff 查看 + 提交/推送

内建 Git Diff 查看器：你可以在浏览器里对比代码修改、提交 commit、甚至推送 push。
对于希望 AI 辅助编码、然后检查 diff 的开发流程特别适合。

定时消息调度

可以为 Claude Code 消息设置 cron 表达式，实现定时任务、循环任务（支持跳过／运行）以及自动 删除。 例如：每天凌晨自动启动某个 agent 执行任务，再由你浏览结果。

多语言支持 + 移动优化

UI 支持英文和日文界面，响应式设计适合手机浏览。 如果你常使用手机远程查看或者在平板上操作，这是一个加分项。

零数据丢失 & 流程结构化

项目强调「Zero data loss」：严格的 Zod schema 验证保证日志格式完整；此外采用「渐进披露」（Expandable UI）设计，使得子会话等复杂结构也可清晰展开。

技术架构

架构图

技术优势 &架构解析

组成模块	描述	优势
日志数据读取	直接读取 Claude Code 在本地生成的 JSONL 文件	无需额外数据库，部署更轻量
后端监控与通知	使用 Server-Sent Events(SSE)监听日志变更，前端 React Query 自动刷新	实时同步、低延迟
前端 UI	基于 React、Next.js，提供项目/会话导航、查看、操作 UI	浏览器可用、易用性高
Git Diff 与提交模块	直接调用 Git 命令或通过 Node 库操作代码仓库	适合代码审查和变更管理
上传/预览模块	支持多媒体/文档上传预览	扩展性强，支持项目辅助资料
定时消息调度模块	通过 cron 表达式调度 Claude 消息	自动化任务支持，提升流程效率

相比于仅在终端操作的 Claude Code 客户端，Viewer 的优势包括：

• 可视化交互：不再只是终端 CLI，而是在浏览器中操作和查看。
• 远程访问能力：部署后可通过浏览器远程访问，例如手机操作。
• 多项目结构支持：支持多个 project、多个 session 切换。
• 辅助流程集成：Git Diff、文件预览、定时任务等增强了编码流程管理能力。

界面效果展示

Image

Image

Image

Image

Image

截图说明：

• 第一张：聊天视图，左侧项目/会话树，右侧对话内容，工具调用 & thinking 阶段可折叠。
• 第二张：项目-会话列表界面，可选多个项目、会话切换。
• 第三张：Git Diff 查看界面：展示代码变化、commit 按钮、push 功能。

从这些截图可以看到，界面清晰、结构分明、操作流畅。对于开发者来说，从浏览器就可完成大部分 Claude Code 的日常操作。

应用场景

场景 A：AI 辅助编码流程管理

你在使用 Claude Code 辅助编写代码、生成补丁、重构、测试。用了 Claude Code Viewer 之后：

• 在浏览器查看历史 session，了解 agent 是如何一步步执行操作的。
• 在 Git Diff 界面快速审查 agent 提交的代码。
• 使用定时任务模块设置某个自动任务，例如「每天 2 点生成报表代码」。 这大幅提升 AI 辅助编码的管理效率。

场景 B：远程／移动开发支持

你在外办公或出差，想用手机查看 Claude Code 的运行状况：

• 部署 Viewer 在远程服务器，通过 tailscale 或 VPN 访问。
• 手机浏览器即可查看会话、上传文件、开始新的会话。正如作者所说：

场景 C：非工程师协作

非技术角色也希望参与 Claude Code 流程（例如产品、设计、分析）：

• 通过 Viewer 界面上传需求文档、截图、说明。
• 查看 agent 执行过程，提交反馈。
• 浏览 Git Diff，了解 agent 贡献。 减少了终端操作门槛，提升跨角色协作效率。

场景 D：教学／演示环境

在教学或技术演示中，你想展示 Claude Code 的运行流程：

• 用 Viewer 展示会话历史、子会话展开流程。
• 演示 agent 工具调用、输出结果、diff 变化。 界面化展示比命令行更直观、更适合演讲或课堂。

项目对比

以下为 Claude Code Viewer 与其他 类似工具的对比：

项目名称	功能重点	优势	劣势
Claude Code Viewer（本项目）	日志可视化 + 浏览器操作 + Git Diff + 定时任务	自托管、实时、交互丰富、远程可用	仅支持 Claude Code 项目日志，需要本地 ~/.claude 结构
Claude Code Web UI（sugyan）	将 Claude Code CLI 转为 Web 前端	快速 UI 化、适配移动	功能偏向聊天界面，日志浏览能力弱
Claude Code Proxy（seifghazi）	请求代理 + 可视化监控	支持监控多模型、API 路由	偏向监控，可视化但交互操作有限
Claude Code History Viewer（jhlee0409）	桌面日志浏览工具	支持多平台、专注历史数据	不支持会话启动、Web 远程功能弱

本项目优势总结

• 功能丰富：不仅日志浏览，还能启动/续会话、Git 提交、定时任务。
• 浏览器可用：远程、移动设备都能访问。
• 自托管安心：本地部署，不强依赖云服务。
• 实时同步：日志文件变化即可浏览，无需手动刷新。
• 专注 Claude Code 生态：与 Claude Code 项目结构契合。

总结

如果你正在使用 Claude Code，想大幅提升「日志查看／历史回溯／远程管理／Git 审查」的效率，那么 Claude Code Viewer 是一个「浏览器化、流程化」极佳选择。它让终端工具向网页操作转化，让 AI 编程流程更透明、更易管理。

项目地址

https://github.com/d-kimuson/claude-code-viewer