Claude Code Browserの日本語解説

Web
Claude Code Browserの日本語解説

Claude Code Browserの日本語解説

Claude Code Browserは、Claude Codeがローカルに保存する会話データとそのメタデータを可視化し、利用履歴や操作内容を詳細に閲覧できるWebアプリケーションです。会話ごとのツール呼び出しやリポジトリごとの利用状況をブラウズ可能で、利用コストの追跡や分析に役立ちます。本記事では、リポジトリの概要や技術的特徴、構成について詳しく解説します。

https://github.com/zainhoda/claude-code-browser

概要

Claude Code Browserは、AIアシスタントClaude Codeが生成する全ての会話データをローカルに保存している仕組みを活用し、それらの会話履歴をブラウザ上で閲覧・分析できるWebアプリケーションです。従来は不透明だった会話内容やツール呼び出しの詳細、利用したリポジトリごとの履歴を可視化し、ユーザーが自身の利用状況や操作内容を容易に把握できるよう設計されています。特に、ReadやEdit、Bash、Grepなどのツール呼び出しを時系列に追跡可能で、Claude Codeの利用コストや効率を分析したい開発者にとって便利なツールとなっています。

GitHub

リポジトリの統計情報

  • スター数: 3
  • フォーク数: 0
  • ウォッチャー数: 3
  • コミット数: 6
  • ファイル数: 15
  • メインの言語: templ

主な特徴

  • Claude Codeがローカルに保存する会話とメタデータを解析し、Webブラウザ上で閲覧可能
  • 会話単位でのツール呼び出し（Read、Edit、Bash、Grepなど）を詳細に表示
  • 利用したリポジトリごとの会話履歴を一覧化し、クリックで詳細にアクセス可能
  • 利用コストや操作履歴の把握に役立つダッシュボード機能を搭載

技術的なポイント

Claude Code Browserは、Claude Codeがローカルに保存している会話データの構造に着目し、それらを効率よく読み込み・表示するWebアプリケーションとして実装されています。Claude Codeは各会話をJSONをベースにしたメタデータとともに保存しており、これを単にファイルとして管理するだけでなく、ユーザーがブラウザ上で直感的に操作できるUIに変換している点が特徴です。

具体的には、ファイルシステムから会話データを読み込み、それらをリポジトリ単位に整理。各会話に紐づくツール呼び出しの履歴（例：ファイルの読み込み、編集コマンドの実行、シェルコマンドの呼び出しなど）を時系列でトレースできる仕組みが組み込まれています。これにより、ユーザーはどのリポジトリでどのような操作が行われたかを詳細に理解可能です。

技術的には、テンプレート言語「templ」をメインに用いており、静的かつ動的なHTML生成が高速かつ効率的に行える設計がなされています。ファイル構成もシンプルで、Makefileによるビルド管理やGit管理が適切に実施されています。UIはMinimalかつ機能的で、会話リストやツールコール履歴のフィルタリング・表示切替が容易です。

また、このツールはClaude Codeの利用コスト管理にも活用でき、どの会話や操作がリソースを消費したかの分析が可能です。これにより、開発者はAIアシスタントの利用効率を最大化し、不要なコストを削減することが期待できます。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitignore: Git管理対象外ファイルの指定
  • CLAUDE.md: Claude Codeに関するドキュメント
  • LICENSE: ライセンス情報
  • Makefile: ビルドやローカル起動用のコマンド定義
  • README.md: プロジェクト概要と利用方法の説明

その他、テンプレートファイルや静的リソースを含む合計15ファイルで構成されており、シンプルな構成ながら機能性を備えています。

まとめ

Claude Codeの会話データを可視化し、利用履歴の詳細分析を可能にする便利なツールです。

リポジトリ情報：

READMEの抜粋：

Claude Code Browser

Did you know that Claude Code stores all your conversations locally on your computer with tons of metadata? This is how other tools can track Claude Code costs and utilization.

I got curious about what was actually contained in these files and ended up building a web app that lets you browse all the repositories you’ve used Claude Code with. You can click into any conversation to see detailed information including:

  • All tool calls (Read, Edit, Bash, Grep, etc.)
  • To…