es617/claude-replay

claude‑replay – AIコーディングセッションを共有可能でインタラクティブなHTMLに変換

何であるか – claude-replay は、Claude Code、Cursor、Codex CLI、Gemini CLI、OpenCode、Kimi Code、Hermes Agent などのAIコーディングアシスタントが生成するトランスクリプトファイルを読み取り、1つの自己完結型HTMLリプレイに変換するコマンドラインツール（およびウェブエディタ）です。このリプレイは任意のブラウザで開け、ドキュメントに埋め込むことも、メールで送信することも可能で、ビデオなしで開発会話全体（ツール呼び出し、推論ブロック、ファイル変更など）を読者が視聴できます。

なぜ重要か – AI駆動のコーディングセッションは、教育、バグレポート、デモ、ブログ投稿において価値がありますが、元のJSONLログは読みにくく、スクリーンレコーディングは巨大です。claude-replay は、インタラクティブで軽量な再生機能を提供することで、このギャップを埋め、元の構造（ユーザーのプロンプト、アシスタントの返答、ツール使用）を保持しつつ、速度制御、非表示処理、テーマ設定などの機能を追加します。

主な機能

• ゼロ依存のHTML – 出力ファイルにはすべてのCSS/JSと圧縮されたトランスクリプトがバンドルされているため、オフラインでも動作可能で、どこにでもホスティングできます。
• マルチエージェント対応 – 7種類の異なるエージェントのフォーマットを自動検出し、ツール呼び出し名を共通のUIに正規化します。
• ライブ監視モード – --serve --watch でローカルサーバーを起動し、ソーストランスクリプトが増えるたびにリプレイを再生成します。長時間実行されるエージェントの監視に有用です。
• ウェブベースエディタ – 引数なしで claude-replay を実行すると、ブラウザUIが開き、発見されたセッションを閲覧、ターンの編集、ブックマークの追加、テーマのカスタマイズ、エクスポート前の最終リプレイプレビューが可能です。
• 非表示処理とプライバシー – APIキー、パスワードなど、シークレットを [REDACTED] やカスタムテキストに置き換えるための組み込みルールがあります。
• 再生コントロール – 再生/一時停止、ステップバイステップナビゲーション、速度スライダー（0.5〜5×）、推論ブロックとツール呼び出しのトグル、キーボードショートカット。
• テーマ設定 – tokyo‑night、dracula、monokaiなど、いくつかの用意されたテーマに加え、JSONベースのカスタムテーマシステムがあります。
• エクスポートオプション – どのターンを含めるか選択、タイムスタンプでフィルタ、初期速度の設定、チャプターのブックマーク追加、タイミングの取得方法（実際のタイムスタンプ、合成された「ペース付き」タイミング、単語単位の表示）を制御できます。

一般的なワークフロー

1. 対応エージェントの1つでAIコーディングセッションを実行；エージェントはトランスクリプトファイル（例：~/.claude/projects/my‑proj/session.jsonl）を出力します。
2. リプレイを生成：

   claude-replay abc123def456 -o demo.html
   

   ツールはIDに基づいてトランスクリプトを自動検出します。
3. ブラウザで demo.html を開き、インタラクティブな再生を視聴するか、ブログ投稿に <iframe> で埋め込みます。
4. より細かい制御が必要な場合、ビジュアルエディタ（claude-replay）を起動し、ターンの編集、ブックマークの追加、テーマの選択、その後エクスポートします。

インストール方法 – グローバルnpmパッケージ（npm install -g claude-replay）として利用可能。または npx claude-replay で即時実行。隔離された環境での利用を想定したDockerイメージ（ghcr.io/es617/claude-replay）も提供されています。

誰が使うべきか

• AIアシスタントがコードの作成やデバッグを支援した様子をアピールしたい 開発者
• AIの推論をインタラクティブに示したい 技術ライター／教育者
• 大きなログファイルではなく、簡潔なリプレイを好む バグレポーター
• リモートマシン上でエージェントの活動をリアルタイムで監視したい チーム

結論 – claude-replay は、もともと透過的なAIコーディングログを、洗練され、共有可能でインタラクティブな体験に変換し、AI補助開発のコミュニケーション、教育、ドキュメント作成をより容易にします。