ByteNoteByteNote
字

字节笔记本

2026年2月22日

Claude Code Viewer - Web 端 Claude Code 客户端

#Claude Code

本文介绍 Claude Code Viewer，一个功能齐全的 Web 端 Claude Code 客户端，提供完整的交互功能来管理 Claude Code 项目。该项目让你可以通过现代化的 Web 界面启动新对话、恢复现有会话、实时监控运行任务，并浏览对话历史。

项目简介

Claude Code Viewer 是一个基于 Web 的 Claude Code 客户端，专注于全面的会话日志分析。它通过严格的 schema 验证和渐进式披露 UI 来保留和组织所有对话数据，按需显示详细信息。

核心理念：零数据丢失 + 高效组织 + 远程友好设计

截至目前，该项目在 GitHub 上已获得 900+ stars，拥有 100+ forks，是一个活跃维护的开源项目。

核心特性

特性描述
查看聊天日志通过 Web UI 实时查看 Claude Code 会话日志。支持历史日志，使用标准 Claude Code 日志（~/.claude/projects/...）作为数据源
搜索对话使用 ⌘K（macOS）或 Ctrl+K（Linux）进行全文搜索。支持在特定项目或所有项目中搜索，具有模糊匹配、前缀搜索和键盘导航功能
启动对话直接从 Claude Code Viewer 启动 Claude Code 会话，享受文件/命令补全、暂停/恢复和工具审批等核心功能
恢复会话直接从现有会话日志恢复对话
继续会话通过 Claude Code Viewer 启动的会话保持活跃状态（除非中止），允许你在不恢复的情况下继续对话（无 session-id 重新分配）
创建项目从 Claude Code Viewer 创建新项目，通过 Web UI 选择目录执行 /init 命令并开始项目设置
文件上传与预览直接从聊天界面上传图片（PNG、JPEG、GIF、WebP）、PDF 和文本文件。每种文件类型都有专用的预览组件
浏览器预览在 Claude Code Viewer 中直接预览 Web 应用。点击聊天消息中的任何 URL 上的预览按钮，在右侧打开可调整大小的浏览器面板
消息调度器使用 cron 表达式调度 Claude Code 消息以执行周期性任务，或在特定日期时间执行一次性任务
查看变更内置 Git Diff 查看器，让你在 Claude Code Viewer 中直接查看所有变更
提交变更直接从 Web 界面的 Git Diff 查看器中执行 Git 提交
推送变更从 Git Diff 查看器直接推送已提交的变更
分支切换器直接从 Git 标签页切换本地 Git 分支（带搜索和状态指示器）
文件与工具检查器右侧面板标签，汇总编辑的文件，按项目分组，并列出工具调用
Todo 查看器从会话中提取最新的 TodoWrite 项目，以可折叠清单形式显示
终端面板通过 WebSocket 的底部面板终端，用于运行 shell 命令而无需离开 UI
MCP 服务器查看器直接在会话侧边栏查看 MCP 服务器配置
系统信息监控 Claude Code 和 Claude Code Viewer 版本、功能兼容性和系统状态
多语言支持完整的国际化支持，提供英语、日语和简体中文语言选项

技术栈

  • 前端框架: Next.js + React + TypeScript
  • UI 组件: shadcn/ui
  • 后端: Hono (轻量级 Web 框架)
  • 构建工具: Vite
  • 包管理器: pnpm
  • 终端: ruspty (PTY 后端)
  • 国际化: Lingui

安装指南

快速开始（CLI）

直接从 npm 运行，无需安装：

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

或者全局安装：

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

服务器将在端口 3400（或默认端口 3000）上启动。在浏览器中打开 http://localhost:3400 访问界面。

可用选项：

text
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 \
  -e ANTHROPIC_BASE_URL=... \
  -e ANTHROPIC_API_KEY=... \
  -e ANTHROPIC_AUTH_TOKEN=... \
  claude-code-viewer

或者使用提供的 Compose 配置：

bash
docker compose up --build

注意：docker-compose.yml 默认不挂载 claude_home。如果你需要容器重用现有的 Claude 工作区，请将卷映射到 /root/.claude。

系统要求

  • Node.js: 20.19.0 或更高版本
  • 操作系统: macOS 和 Linux（不支持 Windows）
  • Claude Code: v1.0.50 或更高版本
  • 工具审批功能: 需要 Claude Code v1.0.82 或更高版本

数据源

应用程序从以下位置读取 Claude Code 对话日志：

  • 位置: ~/.claude/projects/<project>/<session-id>.jsonl
  • 格式: 包含对话条目的 JSONL 文件
  • 自动检测: 自动发现新项目和会话

环境变量

命令行选项环境变量描述默认值
-p, --portPORT服务器监听端口3000
-h, --hostnameHOSTNAME服务器主机名localhost
-P, --passwordCCV_PASSWORD认证密码-
-e, --executableCCV_CLAUDE_CODE_EXECUTABLEClaude Code 可执行文件路径claude
--claude-dirCCV_CLAUDE_DIRClaude 目录路径~/.claude
-CCV_ENV运行环境 (development 或 production)-
-ANTHROPIC_BASE_URLAnthropic API 基础 URL-
-ANTHROPIC_API_KEYAnthropic API 密钥-
-ANTHROPIC_AUTH_TOKENAnthropic 认证令牌-

CCV_ENV 注意事项：如果环境中设置了 CCV_ENV=development，应用程序将以开发模式启动。生产使用请设置 CCV_ENV=production 或保持未设置状态。

使用场景

场景 1：远程开发

在远程服务器上运行 Claude Code Viewer，通过浏览器访问，无需在本地安装 Claude Code。

bash
# 在远程服务器上启动
claude-code-viewer --port 3400 --hostname 0.0.0.0 --password your-secure-password

场景 2：团队协作

团队成员可以通过共享的 Web 界面访问和管理 Claude Code 项目，查看彼此的会话历史。

场景 3：会话分析

利用强大的搜索和过滤功能，分析历史会话数据，提取有价值的洞察。

项目链接

许可证

MIT License

Claude Code
上一篇

n8n-skills：Claude Code 技能集，构建高质量 n8n 工作流

下一篇

Claude Code Viewer - Web 端 Claude Code 客户端

分享: