Claude Code Viewer: 打造 Web 端 Claude Code 会话管理利器
Claude Code Viewer: 打造 Web 端 Claude Code 会话管理利器
当 Claude Code 成为日常开发标配，如何更高效地管理会话历史、分析对话流程就成了开发者的新需求。Claude Code Viewer 应运而生——一个功能完备的 Web 端 Claude Code 客户端。
背景介绍
Claude Code 是 Anthropic 推出的 AI 编程助手，但其原生的会话管理能力相对基础。大多数开发者面临以下痛点：
- 会话历史难以追溯和检索
- 无法在移动设备上方便地查看会话
- 多人协作时难以共享会话内容
- 缺乏对会话流程的全局视角
Claude Code Viewer 正是为解决这些问题而生的开源项目。它采用 Web 架构设计，专注于会话日志的完整分析，通过严格的数据校验和渐进式展示 UI，让每一个对话细节都清晰可见。
核心特性
📋 会话日志查看
Claude Code Viewer 直接读取 Claude Code 的标准日志格式（~/.claude/projects/<project>/<session-id>.jsonl），实时展示会话内容。支持历史日志浏览，新会话会自动被发现。
🔍 全局搜索
支持跨会话全文检索，快捷键 ⌘K (macOS) / Ctrl+K (Linux) 即可唤起搜索框。功能包括：
- 模糊匹配
- 前缀搜索
- 键盘导航（↑↓ 选择，Enter 确认）
- 可选择特定项目或全局搜索
🚀 发起新会话
直接在 Web 界面启动 Claude Code 会话，享受完整的文件/命令补全、暂停/恢复、工具授权等功能体验。
💡 继续会话
独特的继续会话机制：通过 Claude Code Viewer 启动的会话会保持存活状态（除非手动终止），无需重新加载 session-id 即可持续对话，避免了传统 resume 方式的状态丢失。
📁 项目管理
- 创建新项目：通过 Web UI 选择目录，执行
/init命令完成初始化 - 项目列表：集中管理所有 Claude Code 项目
📎 文件上传与预览
支持直接上传图片（PNG、JPEG、GIF、WebP）、PDF 和文本文件。每种文件类型都有专门的预览组件：
- 图片：内联渲染
- PDF：嵌入式查看器
- 文本：格式化内容展示
🌐 浏览器预览
在聊天界面右侧嵌入可调整大小的浏览器面板，预览任何 URL。支持：
- URL 输入框 + 键盘导航
- 刷新功能
- 随导航自动调整聊天窗口宽度
- 同源策略下的 URL 变化追踪
⏰ 消息定时发送
支持 cron 表达式设置周期性任务，或指定具体时间执行一次性任务。特性包括：
- 并发控制（跳过/执行）
- 定时任务自动删除
- 速率限制自动继续（检测到限流后自动安排 “continue” 消息）
📝 Git 集成
内置 Git 功能，让代码审查和提交流程完全在 Web 端完成：
- Diff 查看器：查看所有变更
- 提交：直接执行 Git 提交
- 推送：支持单独推送或提交+推送一体化流程
- 分支切换：在 Git 面板中切换分支（支持搜索和状态指示）
📊 侧边栏工具
- 文件与工具检查器：汇总编辑过的文件，按项目分组，列出工具调用并支持过滤和快速预览
- 待办查看器：提取会话中的
TodoWrite项，以可折叠清单形式展示 - 终端面板：底部 WebSocket 终端，无需离开 UI 即可运行 Shell 命令
- MCP 服务器查看器：查看 MCP 服务器配置，支持实时重载
⚙️ 系统信息
监控 Claude Code 和 Claude Code Viewer 的版本、特性兼容性和系统状态。
🌏 多语言支持
完整的国际化支持，涵盖：
- English
- 日本語
- 简体中文
快速开始
CLI 方式（推荐）
直接运行，无需安装：
npx @kimuson/claude-code-viewer@latest --port3400或全局安装：
npminstall-g @kimuson/claude-code-viewer claude-code-viewer --port3400服务启动后，访问 http://localhost:3400 即可。
命令行选项：
claude-code-viewer [options] Options: -p, --port<port> 端口号 (默认: 3000) -h, --hostname<hostname> 主机名 (默认: localhost) -P, --password<password> 认证密码 -e, --executable<executable> Claude Code 可执行文件路径 --claude-dir <claude-dir> Claude 目录路径 --api-only API 纯响应模式（无 Web UI） Docker 部署
构建镜像：
docker build -t claude-code-viewer .运行容器：
docker run --rm-p3400:3400 \-ePORT=3400\-eCCV_PASSWORD=your-password \ claude-code-viewer 或使用 Docker Compose：
docker compose up --build⚠️ 注意：默认的 docker-compose.yml 没有挂载 claude_home。如需复用本地 Claude 工作区，需配置 volume 映射：与官方方案的对比
官方 Web 版 Claude Code
Anthropic 官方提供 Claude Code on the Web，在云端虚拟机中运行会话。
适合使用官方方案的场景：
- 快速测试，无需本地配置
- 移动设备或公共电脑临时使用
- 单一的 CLAUDE.md 根目录项目
适合使用 Claude Code Viewer 的场景：
- 需要使用预配置本地环境（数据库、服务、大型依赖）
- Monorepo 项目，多个目录各有 CLAUDE.md
- 开发需要大量计算资源或长时间运行进程
- 偏好自托管，对开发环境有完全控制需求
社区其他 Web 客户端
社区也涌现了不少优秀的 Web 客户端，如 sugyan/claude-code-webuisupport、wbopan/cui、siteboon/claudecodeui 等。
Claude Code Viewer 的差异化优势：
| 特性 | 说明 |
|---|---|
| 零信息丢失 | Zod 严格校验，确保每个对话细节都被保留 |
| 渐进式展示 | 可展开元素和子会话弹窗，管理信息密度 |
| 内置 Git 操作 | 完整 Diff 查看器，支持直接提交 |
| 会话流程分析 | 跨多会话的完整对话追踪 |
| 系统监控 | 实时版本和特性兼容性监控 |
| 国际无障碍 | 多语言支持 |
远程开发支持
Claude Code Viewer 从设计之初就考虑了远程托管场景：
- 移动端优化 UI：响应式设计，专用移动端侧边栏，触控优化
- 内置 Git 操作：直接在 Web 界面审查和提交代码
- 实时通知：任务完成时音频提醒
- 系统监控：跨环境监控 Claude Code 兼容性
基础密码认证可通过 --password 或 CCV_PASSWORD 环境变量启用。如需更复杂的认证方案，建议在基础设施层面实现（如反向代理 OAuth、VPN、IP 白名单）。
系统要求
- Node.js: 20.19.0+
- 操作系统: macOS / Linux（不支持 Windows）
- Claude Code: v1.0.50+
- 工具授权功能: 需要 v1.0.82+
总结
Claude Code Viewer 为开发者提供了一个强大且灵活的 Web 端会话管理解决方案。无论你是需要：
- 回溯历史会话进行代码审查
- 在移动设备上查看开发进度
- 团队共享会话协作
- 远程开发工作
Claude Code Viewer 都能满足你的需求。其开源免费、特性丰富且持续活跃维护，值得一试。
项目地址: https://github.com/d-kimuson/claude-code-viewer
