weiesky/cc-viewer

CC‑Viewer – Claude Code のビジュアルフロントエンド＆ヘルパー

概要 – CC‑Viewer（ccv コマンドとしてインストール）は、Anthropic の Claude Code CLI の薄いラッパーです。同じバックエンド実行ファイルを起動しつつ、セッション、ログ、ファイル差分、検索、その他の開発支援機能を表示するローカル Web UI も起動します。これは Claude Code の「リモートデスクトップ」のようなもので、任意のブラウザ（スマートフォンでも）からコーディングセッションを表示・制御できます。

主な機能

• ドロップイン置換 – ccv はすべての引数を基盤の claude バイナリに転送するため、既存の Claude Code スクリプトはそのまま動作します。
• Web ビューア – セッションが開始するとブラウザタブが開きます（デフォルトは http://localhost:7008）。UI にはリアルタイムチャット、コード差分、ファイルエクスプローラ、検索・置換、モバイルデバイス向け QR コード共有が表示されます。
• SDK / ヘッドレスモード – ccv --sdk は Claude Agent SDK を介してセッションを実行します。UI はメッセージを送信するだけで、CLI 側は非表示になります。
• ロガーモード – ccv -logger はすべての Claude Code リクエストをセッションごとのディレクトリ（wire-format v2）に記録し、完全で検閲のない対話ログを提供します。
• パスワード / トークン保護 – リモート LAN アクセスは、短い自動生成パスワードまたはワンタイム ?token= URL で保護できます。パスワードはディスク上で暗号化されて保存されます。
• コンテナ / クラウド対応 – サーバーはデフォルトで 0.0.0.0 にバインドするため、Docker やクラウド VM 内で実行できます。管理者操作はトークン/パスワード認証後にのみ許可されます。
• システムプロンプトマネージャ – UI でモデルごとのシステムプロンプトを編集でき、起動時に自動的に注入されます。
• 検索と置換 – ワークスペース全体で VS Code スタイルの検索を内蔵。利用可能な場合は ripgrep を使用します。

入手方法

• npm でグローバルインストール（npm i -g cc-viewer）、Homebrew（brew install cc-viewer）、または pnpm（pnpm add -g cc-viewer）でインストールします。
• Node 20+ と Claude Code バイナリがインストールされていることを確認します。
• ccv（または一般的な使用法では ccv -c --d）を実行すると、UI が自動的に表示されます。

一般的なワークフロー

1. ccv … で Claude Code セッションを開始します。
2. ブラウザ UI にチャットと、Claude が行うファイル編集のライブ差分が表示されます。
3. サイドパネルを使用して、ファイルを検索、置換、または直接開きます。
4. 表示された QR コードをスキャンして、スマートフォンからセッションを続行します。
5. 終了したらプロセスを停止します。ログは ~/.claude/cc-viewer/… に保存され、後で確認できます。

重要な理由 – Claude Code は強力な LLM 駆動のコーディングアシスタントですが、デフォルトの CLI はターミナルのみです。CC‑Viewer はビジュアルでクロスデバイスなインターフェースと堅牢なログを追加し、チームや個人開発者が AI 支援コーディングセッションを監視、監査、共有しやすくします。

ライセンス – MIT。