Claude Code Viewer: A Comprehensive Web Client for Managing Claude Code Projects

If you frequently use Claude Code for project development, you’ve probably run into these common frustrations: session logs scattered across local files that are hard to organize, struggling to pick up work seamlessly when switching between devices, or lacking an intuitive interface to monitor task progress in real time. Today, we’re introducing Claude Code Viewer—a tool built specifically to solve these pain points. It’s a full-featured web-based client for Claude Code that lets you easily manage sessions, view logs, control task progress, and even handle code changes—all through a modern web interface.

What Is Claude Code Viewer?

At its core, Claude Code Viewer is a web-based client for Claude Code, with a primary focus on being a “complete session log analysis tool”. It preserves all conversation data through strict schema validation and uses a “progressive display” interface design (only showing details when needed) to keep information clear and uncluttered.

Its design philosophy can be summed up in three key principles:

• Zero data loss: No session details are omitted
• Efficient organization: Turns scattered logs and sessions into a structured system
• Remote-friendly: Adapted for remote development scenarios, enabling access anytime, anywhere

What Can Claude Code Viewer Do for You?

As an all-in-one client tool, its features cover every stage of the Claude Code workflow. Below are the core capabilities you’ll find most useful:

1. Easily View Chat Logs

Whether you’re working on an active session or need to revisit past conversations, you can access them in real time through the web interface. It directly reads Claude Code’s standard log files (stored at ~/.claude/projects/...), so no extra data synchronization is required—if the logs exist locally, they’ll appear here automatically.

2. Start New Sessions Directly

You don’t need to type commands in the terminal to launch a Claude Code session. Instead, you can start one right from the web interface. Core functions like file/command completion, pausing/resuming tasks, and tool permission approval are all accessible through the interface—making operations more intuitive than using the terminal alone.

3. Seamlessly Resume Existing Sessions

If a previous session was interrupted, you don’t have to hunt for the session ID to restart it. Simply find the relevant historical session in the interface and resume it with one click. Even better, sessions started via Claude Code Viewer stay active (unless manually terminated). You can close the interface and come back later to continue the conversation without getting a new session ID.

4. Quickly Create New Projects

Want to start a new project? Select a local directory in the web interface, and it will automatically run the /init command to initialize the project—saving you from typing the command manually.

5. Convenient File Uploads and Previews

Need to upload files during a chat? Claude Code Viewer supports direct uploads of images (PNG, JPEG, GIF, WebP), PDFs, and text files. Each file type has a dedicated preview method: images display directly in the chat box, PDFs open in an embedded viewer, and text files show formatted content—so you can view files without downloading them first.

6. Scheduled Message Sending

If you need to run recurring tasks (like generating a daily report), you can set up periodic sending using cron expressions. For one-time tasks, you can specify an exact time. It also supports concurrency control (choose to “skip” or “execute” overlapping tasks) and automatic cleanup (delete scheduled tasks after completion).

7. View and Commit Code Changes

It includes a built-in Git Diff Viewer, so you can visually compare all code changes directly in the interface. After reviewing changes, you don’t need to switch to the terminal—you can execute Git commits right in the interface, or even complete “commit and push” in one click to streamline your workflow.

8. View MCP Server Configurations

The session sidebar displays configurations for all MCP servers, including server names and their corresponding commands. It also supports real-time refreshing, so you can stay updated on server status without extra steps.

9. System Information Monitoring

You can check the versions of Claude Code and Claude Code Viewer, feature compatibility, and system status at any time—helping you avoid issues caused by version mismatches.

10. Multilingual Support

The interface supports English and Japanese. It automatically switches based on your system settings, but you can also select your preferred language manually—making it suitable for teams in different language environments.

Feature Screenshots: A Visual Look at the Interface

Feature	Screenshot
Desktop Basic Chat Interface
Mobile Basic Chat Interface
Command Completion
File Completion
Git Diff Viewer

For more interface screenshots, you can check the project’s /e2e/snapshots/ directory.

How to Install and Use Claude Code Viewer?

The installation and launch process is straightforward—no complex configuration is needed. Just follow these steps to get started quickly.

Quick Start (No Installation Required)

If you only want to try it out temporarily, you don’t need to install it locally. Instead, run it directly via npm:

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

Here, PORT=3400 specifies the port the tool will run on. You can replace it with a port number you prefer (e.g., PORT=8080).

Global Installation (For Long-Term Use)

If you plan to use Claude Code Viewer regularly, we recommend installing it globally for easy access anytime:

1. Run the installation command:

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

2. Launch the tool:

claude-code-viewer

Once launched, open your browser and visit http://localhost:3400 (if you changed the port, use the port number you specified) to access the interface.

Where Does the Data Come From?

Claude Code Viewer does not store additional data. Instead, it directly reads session logs generated by Claude Code. The specific storage location is:
~/.claude/projects/<project>/<session-id>.jsonl

These are JSONL-formatted files (each line is a JSON object) that contain all content from the session. The tool automatically detects new projects and sessions—so as soon as new logs are generated locally, they’ll sync to the interface without manual import.

Prerequisites Before Use

System Requirements

• Node.js: Version 20.19.0 or higher is required (older versions may not work)
• Operating System: Supports macOS and Linux; Windows is not currently supported

Claude Code Compatibility

• Minimum support for Claude Code v1.0.50. If you want to use the “tool permission approval” feature, you’ll need Claude Code v1.0.82 or higher

Note that newer versions of Claude Code may have more aggressive log summarization behavior. To accommodate users who prefer fixed versions, Claude Code Viewer will maintain long-term compatibility with Claude Code v1.0.50 and above.

How to Configure Claude Code Viewer?

The tool offers two configuration methods: environment variables (for system-level settings) and in-interface settings (for personal preferences).

Environment Variable Configuration

All environment variables are optional—only set them if you need to customize the tool’s behavior:

In-Interface User Settings

You can adjust the following settings directly in the sidebar to match your habits:

How Does It Compare to Other Tools?

There are several web clients for Claude Code available, including official tools and community projects. Claude Code Viewer has a distinct focus, so you can choose the right tool based on your needs.

Comparison with the Official “Claude Code on the Web”

The official web version (https://docs.claude.com/en/docs/claude-code/claude-code-on-the-web) runs on Anthropic’s cloud servers. Each session clones your repository and runs preset commands (e.g., pnpm install).

Scenarios Where the Official Version Works Best:

• Quick testing without setting up a local environment
• Temporary development on a mobile device or public computer
• Simple repository structures with only one CLAUDE.md file in the root directory

Scenarios Where Claude Code Viewer Works Best:

• Dependence on a preconfigured local environment (databases, services, large dependencies)
• Working with monorepos that have multiple CLAUDE.md files
• Tasks requiring significant computing resources or long runtimes
• Preference for self-hosted infrastructure and full control over the development environment

Comparison with Community Web Clients

There are several excellent community-built clients, such as:

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

These tools excel as general-purpose web clients, but Claude Code Viewer stands out for its focus on session log viewing and analysis. Specifically:

• Zero information loss: Strict Zod schema validation ensures every conversation detail is preserved
• Progressive display: Collapsible elements and sub-session popups prevent information overload
• Built-in Git operations: A complete diff viewer and direct commit functionality, ideal for remote development
• Session flow analysis: Tracks the full conversation context across multiple sessions
• System monitoring: Real-time checks of version compatibility and feature support
• Multilingual support: Facilitates collaboration for global teams

Is It Suitable for Remote Development?

Yes—Claude Code Viewer was designed with remote development in mind from the start. Key features that support remote work include:

• Mobile-optimized interface: Responsive design with touch-friendly sidebars and controls, so you can use it smoothly on mobile devices
• Built-in Git operations: View, commit, and push code changes directly in the interface without logging into a remote server
• Real-time notifications: A sound plays when tasks complete, so you can track progress even when you’re not at your computer
• System monitoring: Check Claude Code version and feature support in remote environments anytime

However, note that the tool does not include built-in authentication or authorization (and there are no plans to add these features in the future). If you deploy it remotely, you must implement access control at the infrastructure level (e.g., firewalls, reverse proxy authentication) to ensure security.

Frequently Asked Questions (FAQ)

1. Is Claude Code Viewer Paid?

No—it’s an open-source project released under the MIT License. You can use and modify it for free.

2. Will My Session Logs Be Uploaded to the Cloud?

No—all data is stored locally in the ~/.claude/projects/ directory. The tool only reads local files and does not sync data to the cloud.

3. Does It Support Windows?

Currently, no—Claude Code Viewer only runs on macOS and Linux.

4. How Do I Update Claude Code Viewer?

If you installed it globally, run npm update -g @kimuson/claude-code-viewer to update to the latest version.

5. Why Can’t I Use Some Features?

This may be due to an outdated version of Claude Code. For example, the “tool permission approval” feature requires Claude Code v1.0.82 or higher. You can check the current version compatibility in the “System Information” section of the interface.

6. Can I Run Multiple Sessions at the Same Time?

Yes—the tool supports managing multiple sessions simultaneously, with real-time updates to each session’s status.

7. Will Sessions Still Appear in the Interface If Log Files Are Deleted?

No—the tool relies on local log files. If a log file is deleted, the corresponding session will disappear from the interface.

Final Notes: License and Contributions

Claude Code Viewer is open-source under the MIT License. You can use, modify, and distribute it freely, provided you retain the original license information.

If you want to contribute to development or submit code, check the project’s docs/dev.md file for detailed instructions on setting up a development environment and contribution guidelines.

With Claude Code Viewer, you can upgrade your Claude Code experience from the terminal to a visual interface. Whether you’re managing sessions, viewing logs, or handling code changes, you’ll work more efficiently. If you use Claude Code regularly, give it a try—it might just make your workflow much smoother.