es617/claude-replay

claude‑replay – 將 AI 編碼會話轉換為可分享的互動式 HTML

它是什麼 – claude-replay 是一個命令列（及網頁編輯器）工具，可讀取 Claude Code、Cursor、Codex CLI、Gemini CLI、OpenCode、Kimi Code 和 Hermes Agent 等 AI 編碼助手產生的轉錄檔，並轉換為單一、自包含的 HTML 播放器。此播放器可在任何瀏覽器中開啟，嵌入文件，或透過電子郵件傳送，讓讀者無需影片即可觀看整個開發對話（包含工具呼叫、推理區塊與檔案變更）。

為何重要 – AI 驅動的編碼會話在教學、錯誤報告、示範與部落格文章中極具價值，但原始的 JSONL 日誌難以閱讀，而螢幕錄影檔又體積龐大。claude-replay 透過提供互動式、輕量級的播放功能，彌補此差距，保留原始結構（使用者提示、助理回應、工具使用），並新增速度控制、隱藏處理與主題設定等功能。

核心功能

• 零相依 HTML – 輸出檔案內建所有 CSS/JS 與壓縮後的轉錄內容，因此可離線使用，且可部署於任何位置。
• 多代理支援 – 自動偵測七種不同代理的格式，並將工具呼叫名稱統一為通用 UI。
• 即時監控模式 – 使用 --serve --watch 啟動本機伺服器，當來源轉錄檔增長時自動重新產生播放器，適用於監控長時間執行的代理。
• 基於網頁的編輯器 – 無參數執行 claude-replay 會開啟瀏覽器介面，可瀏覽發現的會話、編輯對話回合、新增書籤、調整主題，並在匯出前預覽最終播放效果。
• 隱藏與隱私 – 內建規則可將密鑰、密碼等敏感資訊替換為 [REDACTED] 或自訂文字。
• 播放控制 – 支援播放/暫停、逐步導覽、速度滑桿（0.5–5×）、推理區塊與工具呼叫的開關，以及鍵盤快速鍵。
• 主題支援 – 提供多種預設主題（tokyo‑night、dracula、monokai 等），並支援基於 JSON 的自訂主題系統。
• 匯出選項 – 可選擇包含哪些回合，依時間戳篩選，設定初始速度，新增章節書籤，並控制時間推導方式（真實時間戳、合成的「節奏」時間、逐字顯示）。

典型工作流程

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 增強開發的溝通、教學與文件編寫更加容易。