Claude Code Browserの日本語解説

Webコードブラウザローカルデータ可視化Claude Code

zainhoda/claude-code-browser

GitHub で見る

GitHub →

概要

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…

関連記事

AI/ML

memory-lancedb-pro スキル（OpenClaw向け長期メモリ）

Claude Code 用の「memory-lancedb-pro」スキルは、OpenClaw AI エージェント向けのプロダクションレベル長期メモリプラグイン（v1.1.0-beta.8）について、インストール／最適構成から Smart Extraction、ハイブリッド検索、ワイブル（Weibull）減衰ライフサイクル、多スコープ隔離、自己改善ガバナンス、MCP ツール群にいたるまで、Claude Code が深く正確に扱える知識を提供します。本リポジトリはスキル定義を通じてエージェントのメモリ運用を標準化・自動化することを目的としています（約300字）。

OpenClaw長期メモリClaude Code
Tool

kicad-happy — KiCad向けClaude Codeスキル集

kicad-happyは、Anthropicの「Claude Code」エージェントを利用してKiCad電子回路設計ワークフローをターミナルから支援するツール群です。回路図の解析、PCBレイアウトのレビュー、部品表（BOM）生成、データシート取得、部品の調達候補提示、基板製造向けの準備作業などを自動化し、設計チェックや製造前の確認を効率化します。ローカルのKiCadプロジェクトファイルを元に解析を行い、Web上のデータソース（例：Digi-Key等）と連携して情報を収集します。Claude Codeのエージェント機能に依存するため、実行環境にClaude Codeが必要です。

KiCadClaude CodeEDA
Security

CVE-2026-21852 PoC — Claude Code 脆弱性教育デモ

Anthropic の Claude Code に関する脆弱性（CVE-2026-21852 など）を教育目的で示す Proof-of-Concept リポジトリの解説記事。サンプルコードは API 機密情報の漏洩やモデル制御に関する脆弱性パターン（MCP 注入、API exfiltration）を再現するための実験的実装を含み、攻撃ベクターの概念、検出ポイント、緩和策の方向性を理解するための学習リソースを提供する。※実運用系への悪用は禁止。

PoCClaude CodeVulnerability
Tool

Feishu（飞书）Webhook スキル

Claude Code 用の Feishu（飞书 / Lark）Webook 送信スキル。Webhook を介してプレーンテキスト、リッチテキスト（post）、インタラクティブカード、画像付きメッセージなど複数形式のメッセージを Feishu に送信できる。Claude のスキルとして簡単に組み込み可能で、シンプルな Python 実装によりメッセージフォーマットや送信処理の拡張・カスタマイズがしやすい設計になっている。

FeishuWebhookClaude Code
AI/ML

エージェントによるプランニング（planning-with-agents）

Claude Codeスキル「planning-with-files」を拡張するプロジェクトで、複雑なタスクを自動で分解し、専門化されたサブエージェントを並列実行、依存関係を明示的に管理して協調的に問題を解決します。プロトタイプ版（v1.0.0）としてコアアルゴリズムを検証済みで、119件のテストが100%通過していることから基本設計と実装品質が高く、Pythonで実装された軽量なオーケストレーションスキルです。並列処理や依存解決が必要なユースケースでの実験や拡張に向いています。

マルチエージェントタスク分解Claude Code
Tool

Claude Code Elixir（Elixir開発向けプラグイン集）

Claude Code のプラグインマーケットプレイスに登録された、Elixir開発向けプラグイン群をまとめたリポジトリ。ElixirのLSPやフォーマッタなど、開発時に便利なツールをClaude Code環境から簡単に追加できるように設計されています。インストール手順や前提条件（macOS/Windows向けのElixirおよびelixir-lsの導入方法）もREADMEに記載されており、Claudeプラグインとしての配布に特化したシンプルな構成です。

ElixirClaude CodePlugins