Claude Code Viewer：全方位管理Claude Code项目的Web客户端

如果你经常使用Claude Code进行项目开发，可能会遇到这些问题：会话日志分散在本地文件中难以整理、不同设备间切换时无法无缝接续工作、想要实时监控任务进度却缺乏直观界面……今天要介绍的Claude Code Viewer，正是为解决这些问题而生的工具。它是一款功能完整的Web-based Claude Code客户端，能帮你轻松管理会话、查看日志、控制任务进度，甚至直接处理代码变更——所有操作都在一个现代化的Web界面中完成。

什么是Claude Code Viewer？

简单来说，Claude Code Viewer是一个基于Web的Claude Code客户端，核心定位是**“全面的会话日志分析工具”**。它通过严格的 schema 验证保存所有对话数据，并用“渐进式展示”的界面设计（需要时才显示细节）让信息呈现更清晰。

它的设计理念可以总结为三点：

  • 零数据丢失：不遗漏任何会话细节
  • 高效组织：让分散的日志和会话有序呈现
  • 远程友好：适配远程开发场景，随时随地访问
Claude Code Viewer演示

Claude Code Viewer能帮你做什么？

作为一款全方位的客户端工具，它的功能覆盖了Claude Code使用的全流程。以下是你可能用得上的核心功能：

1. 轻松查看聊天日志

无论是正在进行的会话，还是过去的历史记录，都能通过Web界面实时查看。它直接读取Claude Code的标准日志文件（路径在~/.claude/projects/...），所以不需要额外同步数据，只要本地有日志，就能在这里展示。

2. 直接启动新会话

不用在终端敲命令，通过Web界面就能直接启动Claude Code会话。核心功能如文件/命令补全、暂停/继续任务、工具权限审批等，都能在界面上操作，比终端更直观。

3. 无缝接续已有会话

如果之前的会话中断了，不用找会话ID重新启动——直接在界面中找到对应的历史会话，一键就能恢复。更方便的是，通过Claude Code Viewer启动的会话会保持活跃（除非手动终止），即使关闭界面，回来后也能继续聊，不会重新分配会话ID。

4. 快速创建新项目

想开始一个新项目？在Web界面中选择本地目录，它会自动执行/init命令完成项目初始化，省去手动输入命令的步骤。

5. 便捷的文件上传与预览

聊天时需要上传文件？支持图片（PNG、JPEG、GIF、WebP）、PDF和文本文件直接上传，而且每种文件都有专门的预览方式：图片直接显示在聊天框里，PDF嵌入查看器，文本文件则会格式化展示内容，不用下载就能看。

6. 消息定时发送

如果需要定期执行任务（比如每天生成一次报告），可以用 cron 表达式设置周期性发送；如果是单次任务，也能指定具体时间。还支持并发控制（重复任务时选择“跳过”或“执行”）和自动删除（定时任务完成后自动清理）。

7. 代码变更查看与提交

内置Git Diff Viewer，所有代码变更都能在界面中直观对比。看完后不用切换到终端，直接在界面里执行Git提交，甚至可以一键完成“提交并推送”，流程更顺畅。

8. MCP服务器配置查看

在会话侧边栏能直接看到所有MCP服务器的配置，包括服务器名称和对应的命令，还支持实时刷新，方便不用额外操作就能掌握服务器状态。

9. 系统信息监控

随时查看Claude Code和Claude Code Viewer的版本、功能兼容性和系统状态，避免因版本不匹配导致的问题。

10. 多语言支持

界面支持英文和日文，会自动根据系统设置切换，也可以手动选择，适合不同语言环境的团队使用。

功能截图：直观了解界面效果

功能 截图
桌面端基础聊天界面 桌面端基础聊天界面
移动端基础聊天界面 移动端基础聊天界面
命令补全功能 命令补全功能
文件补全功能 文件补全功能
Git Diff查看器 Git Diff查看器

更多界面截图可以查看项目的/e2e/snapshots/目录。

如何安装和使用Claude Code Viewer？

安装和启动过程非常简单，不需要复杂的配置，跟着步骤做就能快速上手。

快速启动（无需安装）

如果只是想临时试用，不用安装到本地，直接通过npm运行：

PORT=3400 npx @kimuson/claude-code-viewer@latest

这里的PORT=3400是指定运行端口，你可以换成自己需要的端口号（比如PORT=8080）。

全局安装（长期使用）

如果经常用，建议全局安装，方便随时启动：

  1. 执行安装命令：
npm install -g @kimuson/claude-code-viewer
  1. 启动工具：
claude-code-viewer

启动后，打开浏览器访问http://localhost:3400（如果改了端口，就用你指定的端口），就能看到界面了。

数据从哪里来？

Claude Code Viewer不存储额外数据，它直接读取Claude Code生成的会话日志，具体位置在：
~/.claude/projects/<project>/<session-id>.jsonl

这些是JSONL格式的文件（每行一个JSON对象），包含了会话中的所有内容。工具会自动检测新的项目和会话，只要本地生成了新日志，界面上就会同步显示，不用手动导入。

使用前需要满足哪些条件？

系统要求

  • Node.js：必须是20.19.0或更高版本（低版本可能无法运行）
  • 操作系统：支持macOS和Linux，暂时不支持Windows

Claude Code兼容性

  • 最低支持Claude Code v1.0.50，如果要使用“工具权限审批”功能，需要v1.0.82或更高版本

需要注意的是，新版Claude Code可能会有更激进的日志摘要行为。为了方便习惯固定版本的用户，Claude Code Viewer会长期保持对v1.0.50及以上版本的兼容。

如何配置Claude Code Viewer？

工具提供了两种配置方式：环境变量（适合系统级设置）和界面设置（适合个人偏好）。

环境变量配置

所有环境变量都是可选的，只有需要自定义时才设置：

变量名 说明
CLAUDE_CODE_VIEWER_CC_EXECUTABLE_PATH Claude Code的安装路径。如果没设置，会先找系统PATH里的安装，找不到就用依赖中捆绑的版本
PORT 工具运行的端口号（默认3400）

界面中的用户设置

在侧边栏可以直接调整这些设置，根据自己的习惯修改：

设置项 默认值 说明
隐藏无用户消息的会话 开启 Claude Code会为/compact等操作生成日志，这些可能不是实际任务，开启后会隐藏这类会话，减少干扰
合并同标题的会话 关闭 重新启动会话时，Claude Code会生成新会话和日志。开启后，相同标题的会话只显示最新的一个
发送消息的按键 Shift+Enter 可以选择Enter、Shift+Enter或Command+Enter作为发送快捷键
权限模式 询问权限 当Claude Code请求调用工具时，默认需要通过界面手动批准（需要Claude Code v1.0.82+，低版本会自动批准）
主题 跟随系统 可以手动切换深色/浅色模式，默认和系统设置一致
通知 无 任务完成时是否播放提示音，支持多种声音，还能测试播放效果
语言 跟随系统 界面语言，支持英文和日文，可手动切换

和其他工具相比，它有什么特别之处？

市面上有一些Claude Code的Web客户端，包括官方工具和社区项目，Claude Code Viewer的定位和它们有所不同，你可以根据需求选择。

和官方“Claude Code on the Web”的区别

官方的Web版本（https://docs.claude.com/en/docs/claude-code/claude-code-on-the-web）是在Anthropic的云服务器上运行的，每个会话会克隆你的仓库并执行预设命令（比如pnpm install）。

适合用官方版本的场景：

  • 快速测试，不想在本地配置环境
  • 用手机或公用电脑临时开发
  • 仓库结构简单，只有根目录一个CLAUDE.md文件

适合用Claude Code Viewer的场景：

  • 依赖本地已配置好的环境（数据库、服务、大型依赖）
  • 处理多CLAUDE.md文件的单体仓库
  • 需要大量计算资源或长时间运行的任务
  • 偏好自建基础设施，想完全控制开发环境

和社区Web客户端的区别

社区里有几个不错的客户端，比如：

  • https://github.com/sugyan/claude-code-webuisupport
  • https://github.com/wbopan/cui
  • https://github.com/siteboon/claudecodeui

这些工具作为通用Web客户端很出色，而Claude Code Viewer的特色是专注于会话日志查看和分析，具体体现在：

  • 零信息丢失：通过严格的Zod schema验证，确保每个对话细节都被保存
  • 渐进式展示：可展开的元素和子会话弹窗，避免信息太杂乱
  • 内置Git操作：完整的diff查看器和直接提交功能，适合远程开发
  • 会话流分析：追踪多个会话之间的完整对话脉络
  • 系统监控：实时查看版本兼容性和功能支持情况
  • 多语言支持：方便全球团队协作

适合远程开发吗？

是的，Claude Code Viewer从设计之初就考虑了远程开发场景，主要体现在这些方面：

  • 移动端优化界面：响应式设计，侧边栏和控件都适配触摸操作，用手机也能顺畅使用
  • 内置Git操作：直接在界面里查看、提交、推送代码变更，不用远程登录服务器
  • 实时通知：任务完成时会播放提示音，即使不在电脑前也能知道进度
  • 系统监控：远程环境中也能随时查看Claude Code的版本和功能支持情况

不过要注意：工具本身没有内置认证和授权功能（未来也没有开发计划）。如果要远程部署，需要自己在基础设施层面做好访问控制（比如防火墙、反向代理认证等），确保安全。

常见问题解答

1. Claude Code Viewer需要付费吗？

不需要，它是开源项目，基于MIT许可证，可以免费使用和修改。

2. 我的会话日志会被上传到云端吗？

不会，所有数据都保存在本地的~/.claude/projects/目录，工具只读取本地文件，不进行云端同步。

3. 支持Windows系统吗？

目前不支持，只能在macOS和Linux上运行。

4. 如何更新Claude Code Viewer？

如果是全局安装的，执行npm update -g @kimuson/claude-code-viewer即可更新到最新版本。

5. 为什么有些功能用不了？

可能是Claude Code版本太低。比如“工具权限审批”需要v1.0.82+，可以在界面的“系统信息”里查看当前版本兼容性。

6. 可以同时运行多个会话吗？

可以，工具支持同时管理多个会话，每个会话的状态会实时更新。

7. 日志文件被删除后，界面上还能看到吗？

不能，工具依赖本地日志文件，文件删除后，对应的会话会从界面消失。

通过Claude Code Viewer，你可以把Claude Code的使用体验从终端命令行提升到可视化界面，无论是管理会话、查看日志还是处理代码变更，都能更高效。如果你经常和Claude Code打交道，不妨试试它——也许会让你的工作流程轻松不少。