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 方式（推荐）

直接运行，无需安装：

bash 复制代码

npx @kimuson/claude-code-viewer@latest --port 3400

或全局安装：

bash 复制代码

npm install -g @kimuson/claude-code-viewer
claude-code-viewer --port 3400

服务启动后，访问 http://localhost:3400 即可。

命令行选项：

bash 复制代码

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 部署

构建镜像：

bash 复制代码

docker build -t claude-code-viewer .

运行容器：

bash 复制代码

docker run --rm -p 3400:3400 \
  -e PORT=3400 \
  -e CCV_PASSWORD=your-password \
  claude-code-viewer

或使用 Docker Compose：

bash 复制代码

docker compose up --build

⚠️ 注意：默认的 docker-compose.yml 没有挂载 claude_home。如需复用本地 Claude 工作区，需配置 volume 映射：
yaml 复制代码
services:
  app:
    volumes:
      - /path/to/claude_home:/root/.claude

与官方方案的对比

官方 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