claude-code-viewer

3周前发布 50 0 0
收藏 0

一个功能齐全的基于 Web 的 Claude Code 客户端，提供完整的交互式功能来管理 Claude Code 项目。

收录时间：
2025-12-24
打开网站手机查看
claude-code-viewerclaude-code-viewer
claude-code-viewer打开网站

一款功能齐全的基于 Web 的 Claude Code 客户端，提供完整的交互式功能来管理 Claude Code 项目。您可以通过现代化的 Web 界面发起新的对话、恢复现有会话、实时监控正在运行的任务以及浏览对话历史记录。

介绍

Claude Code Viewer 是一款基于 Web 的 Claude Code 客户端，专注于全面的会话日志分析。它通过严格的模式验证和渐进式披露用户界面来保存和整理所有对话数据，并可根据需要显示详细信息。

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

特征

特征 描述
查看聊天记录 通过 Web 用户界面实时查看 Claude Code 会话日志。它支持历史日志，因为它使用标准的 Claude Code 日志（~/.claude/projects/…）作为数据源。
搜索对话 ⌘K支持在macOS 或Linux 系统下进行全文对话搜索Ctrl+K。可搜索特定项目或所有项目。功能包括模糊匹配、前缀搜索和键盘导航（↑↓ 键导航，回车键选择）。
开始对话 直接从 Claude Code Viewer 启动 Claude Code 会话。通过卓越的 Web 体验，享受文件/命令自动完成、暂停/恢复和工具审批等核心功能。
恢复会议 直接从现有会话日志恢复对话
继续会话 Claude Code Viewer 提供高级会话进程控制。通过 Claude Code Viewer 启动的会话将保持活动状态（除非中止），允许您在不恢复会话的情况下继续对话（不会重新分配会话 ID）。
创建项目 使用 Claude Code Viewer 创建新项目。通过 Web UI 选择目录以执行/init命令并开始项目设置。
文件上传和预览 直接从聊天界面上传图片（PNG、JPEG、GIF、WebP）、PDF 和文本文件。每种文件类型都有专门的预览组件显示——图片直接内嵌显示，PDF 嵌入查看器，文本文件显示格式化内容。
浏览器预览 在 Claude Code Viewer 中直接预览 Web 应用程序。点击聊天消息中任意 URL 的预览按钮，即可在右侧打开一个可调整大小的浏览器面板。功能包括使用键盘导航输入 URL、自动刷新页面以及自动调整聊天窗口宽度。嵌入式浏览器会跟踪您浏览网页时的 URL 更改（仅限同源 URL）。
消息调度器 使用 cron 表达式安排 Claude Code 消息以执行重复性任务，或使用特定日期时间安排一次性执行。支持对周期性作业进行并发控制（跳过/运行），并支持对已保留的作业进行自动删除。
审查变更 内置的 Git Diff Viewer 可让您直接在 Claude Code Viewer 中查看所有更改。
提交更改 直接从 Git Diff Viewer 的 Web 界面执行 Git 提交
推送更改 直接从 Git Diff Viewer 推送已提交的更改。支持单独的推送操作以及提交和推送相结合的工作流，以简化部署。
MCP 服务器查看器 直接在会话侧边栏查看 MCP 服务器配置。列出所有已配置的服务器及其名称和命令，并支持实时重新加载功能。
系统信息 监控 Claude Code 和 Claude Code Viewer 的版本、功能兼容性和系统状态
多语言支持 提供全面的国际化支持，包括英语、日语和简体中文语言选项。

屏幕截图

特征 捕获
BasicChat（桌面版）
BasicChat（移动版）
命令补全
文件完成
差异查看器

 

安装与使用

快速入门（CLI）

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

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

或者，全局安装：

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

服务器将在3400端口（或您指定的端口）上启动。请http://localhost:3400在浏览器中打开以访问界面。

Docker部署

在本地构建镜像：

docker build -t claude-code-viewer .

直接运行容器：

docker run --rm -p 3400:3400 \
  -e CLAUDE_CODE_VIEWER_AUTH_PASSWORD=your-password \
  -e ANTHROPIC_BASE_URL=... \
  -e ANTHROPIC_API_KEY=... \
  -e ANTHROPIC_AUTH_TOKEN=... \
  claude-code-viewer

或者，使用提供的 Compose 配置：

docker compose up --build

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

services:
  app:
    volumes:
      - /path/to/claude_home:/root/.claude

数据来源

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

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

要求

系统要求

  • Node.js：版本 20.19.0 或更高版本
  • 操作系统：macOS 和 Linux（不支持 Windows）

克劳德代码兼容性

  • 最低版本：Claude Code v1.0.50 或更高版本
  • 工具审批功能：需要 Claude Code v1.0.82 或更高版本

版本支持说明：Claude Code 的最新版本采用了更积极的代码摘要机制。为了满足偏好使用特定版本的用户，Claude Code Viewer 在可预见的未来将保持与 Claude Code v1.0.50 及更高版本的兼容性。

配置

环境变量

Claude Code Viewer 会读取几个保留的环境变量。所有值都是可选的，只有当您想要覆盖默认值时才需要设置。

钥匙 描述
CLAUDE_CODE_VIEWER_CC_EXECUTABLE_PATH Claude Code 的安装路径。如果未设置，则使用系统路径下的安装路径，或者回退到依赖项中捆绑的版本。
CLAUDE_CODE_VIEWER_AUTH_PASSWORD 用于身份验证的密码。启用此设置后，将启用基于密码的身份验证，以保护对 Claude Code Viewer 的访问。所有/api路由（登录、注销、检查、配置和版本端点除外）都需要身份验证。如果未设置，则身份验证将被禁用，应用程序将公开访问。
港口 Claude Code Viewer 运行的端口号

用户设置

可以在 Claude Code Viewer 的侧边栏中配置设置。

环境 默认 描述
隐藏没有用户消息的会话 真的 Claude Code 会为与实际任务无关的操作创建日志/compact，这可能会造成噪音。启用此功能后，没有用户消息的会话将被隐藏。
合并标题相同的会话 错误的 恢复运行时，Claude Code 会创建一个新会话并重新生成对话日志。启用此功能后，只会显示标题相同的最新会话。
输入关键行为 Shift+Enter 指定发送消息的按键组合。选项包括 Enter、Shift+Enter 和 Command+Enter。
权限模式 征得许可 控制 Claude Code 请求工具调用时的审批逻辑。默认情况下，用户通过用户界面审批请求。此功能需要 Claude Code v1.0.82 或更高版本；早期版本会自动审批，不受此设置影响。
主题 系统 切换深色模式和浅色模式。默认设置遵循系统设置。
通知 没有任何 启用会话进程运行时的声音通知。可选择多种通知声音，并具备试听功能。
语言 系统 界面语言选择。支持英语、日语和简体中文，并可自动检测系统语言。

社区网络客户端

目前有一些非常优秀的社区自研网页客户端：

Claude Code Viewer 的独特之处：虽然这些工具作为通用 Web 客户端表现出色，但 Claude Code Viewer 专门设计为会话日志查看器，具有以下功能：

  • 零信息丢失：严格的 Zod 模式验证确保保留每个对话细节。
  • 渐进式披露：可扩展元素和子会话模态框有助于管理信息密度
  • 内置 Git 操作：功能全面的差异查看器，具备直接提交功能，适用于远程开发工作流程
  • 会话流程分析：跨多个会话的完整对话跟踪
  • 系统监控：实时版本和功能兼容性监控
  • 国际无障碍：为全球开发团队提供多语言支持

每种工具都有不同的使用场景——选择最适合您的工作流程和优先级的工具。

远程开发

Claude Code Viewer 的设计充分考虑了远程托管的需求。为了支持远程开发工作流程，它包含以下功能：

  • 移动端优化用户界面：响应式界面，配备专用移动侧边栏和触控优化控件
  • 内置 Git 操作：直接通过 Web 界面查看和提交更改
  • 实时通知：任务完成时发出语音通知，以保持对工作流程的了解
  • 系统监控：监控 Claude Code 在不同环境中的兼容性和功能可用性

该应用程序采用分离式客户端-服务器架构，支持远程托管。可通过环境变量启用基本密码身份验证CLAUDE_CODE_VIEWER_AUTH_PASSWORD。设置后，用户必须使用配置的密码进行身份验证才能访问应用程序。然而，这是一种简单的单密码身份验证机制，不具备多用户支持、基于角色的访问控制或 OAuth 集成等高级功能。如果您需要更复杂的身份验证，请仔细评估您的安全需求，并在基础架构层面实施相应的访问控制（例如，使用 OAuth 的反向代理、VPN、IP 白名单）。

 

数据统计

相关导航