概要
https://zenn.dev/bm_sms/articles/claude_code_viewer
詳細内容
## Claude Code をブラウザから操作できるクライアントを自作したらめちゃくちゃ捗った
https://zenn.dev/bm_sms/articles/claude_code_viewer
著者は、Claude CodeのCLIにおける対話ログの可読性やセッション管理の課題を解決するため、ブラウザベースでログ表示、セッション再開、新規チャットが可能なクライアントツール「claude-code-viewer」を開発し、その利便性を実証します。
**Content Type**: Tools
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 86/100 | **Annex Potential**: 84/100 | **Overall**: 84/100
**Topics**: [[Claude Code, AIコーディングエージェント, 開発ツール, ログ管理, リモート開発]]
この記事では、著者が開発したClaude Code向けのブラウザクライアント「claude-code-viewer」が、CLI環境での課題をどのように解決し、開発ワークフローを効率化するかを解説します。従来のClaude Code CLIでは、特にサブセッションを利用する際の会話ログが追いにくく、エージェントの思考プロセスを理解することが困難でした。また、過去のセッションを再開する手間やリモート環境からの操作性も課題でした。
「claude-code-viewer」は、Claude CodeのJSONL形式のログファイルをリアルタイムにパースし、人間が読みやすい形で表示します。プロジェクトごとのセッション一覧確認、ツール利用のin/outやthinkingプロセスの展開表示、サブセッションのモーダル化により、エージェントの挙動を詳細かつ直感的に把握できます。さらに、既存セッションの再開や新規チャットの開始もブラウザから可能で、メッセージ送信にはShift + Enterを採用し誤送信のリスクを低減しています。
技術的には、Next.jsを基盤に、ログファイルの変更をwatchし、Server-Sent Events (SSE) とReact Queryでリアルタイム同期を実現しています。データベースを持たず、既存のログファイルを直接データソースとすることで、シンプルなアーキテクチャを実現しています。
このツールは、期待と異なるアウトプットが出た際のエージェントの思考過程のデバッグや、リモート開発環境においてスマートフォンからClaude Codeを快適に操作する手段として、ウェブアプリケーションエンジニアにとって非常に実用的な価値を提供します。TUIベースのAIツールが抱えるユーザビリティの障壁を下げ、非エンジニアへの普及可能性も示唆しています。