weiesky/cc-viewer

A request monitoring system for Claude Code that captures and visualizes all API requests and responses in real time. Helps developers monitor their Context for reviewing and debugging during Vibe Coding.

CC‑Viewer – a visual front‑end & helper for Claude Code

What it is – CC‑Viewer (installed as the ccv command) is a thin wrapper around Anthropic’s Claude Code CLI. It launches the same backend executable but also starts a local web UI that shows the session, logs, file diffs, search, and other development‑assistant features. Think of it as a “remote‑desktop” for Claude Code, letting you view and control a coding session from any browser – even a phone.

Key features

  • Drop‑in replacement – ccv forwards every argument to the underlying claude binary, so existing Claude Code scripts keep working.
  • Web viewer – When a session starts, a browser tab opens (default http://localhost:7008). The UI displays real‑time chat, code diffs, file explorer, search‑and‑replace, and QR‑code sharing for mobile devices.
  • SDK / headless mode – ccv --sdk runs the session via the Claude Agent SDK; the UI only sends messages, while the CLI side is hidden.
  • Logger mode – ccv -logger records every Claude Code request in per‑session directories (wire‑format v2), giving a complete, uncensored log of the interaction.
  • Password / token protection – Remote LAN access can be secured with a short auto‑generated password or a one‑time ?token= URL. Passwords are stored encrypted on disk.
  • Container / cloud ready – The server binds to 0.0.0.0 by default, so it can be run inside Docker or a cloud VM. Admin actions are only allowed after token/password authentication.
  • System‑prompt manager – UI lets you edit per‑model system prompts that are automatically injected on launch.
  • Search & replace – Built‑in VS‑Code‑style search across the workspace, using ripgrep when available.

How to get it

  • Install globally via npm (npm i -g cc-viewer), Homebrew (brew install cc-viewer), or pnpm (pnpm add -g cc-viewer).
  • Ensure Node 20+ and the Claude Code binary are installed.
  • Run ccv (or ccv -c --d for typical usage) and the UI will appear automatically.

Typical workflow

  1. Start a Claude Code session with ccv ….
  2. The browser UI shows the chat and a live diff of any file edits Claude makes.
  3. Use the side panel to search, replace, or open files directly.
  4. Scan the displayed QR code to continue the session from a phone.
  5. When finished, stop the process; logs are saved under ~/.claude/cc-viewer/… for later review.

Why it matters – Claude Code is a powerful LLM‑driven coding assistant, but its default CLI is terminal‑only. CC‑Viewer adds a visual, cross‑device interface and robust logging, making it easier for teams or solo developers to monitor, audit, and share AI‑assisted coding sessions.

License – MIT.

Related

  • Project
    d-kimuson/claude-code-viewer

    A web-based client for Claude Code that provides a modern interface for managing sessions, searching conversation history, and monitoring tasks in real-time.

  • Project
    andrepimenta/claude-code-chat

    A VS Code extension that provides a beautiful graphical chat interface for the Claude Code CLI, removing the need for terminal commands.

  • Project
    jerrywu001/cc-sessions-viewer

    A native desktop browser for managing and searching local session transcripts from AI agents like Claude Code and Codex, featuring tool management and cost analytics.

  • Project
    winfunc/opcode

    A GUI application and toolkit for Claude Code that provides visual session management, custom agent creation, and usage analytics.

  • Project
    zhukunpenglinyutong/jetbrains-cc-gui

    CC GUI is an IntelliJ IDEA plugin that provides a chat‑style interface for several AI code‑generation models (Claude Code, OpenAI Codex, etc.). It supports file and image context, diff viewing, session history, and a slash‑command‑driven agent system, letting developers interact with AI assistants directly inside their IDE.