[AI Minor News Flash] Transforming Claude Code into ‘Videos’! Introducing the Interactive Replay Tool ‘claude-replay’

📰 News Overview

• The ‘claude-replay’ tool has been released, which converts session logs from Claude Code (in JSONL format) into a single HTML file that can be played back interactively.
• The generated HTML is free from external dependencies, making it easy to share via email attachments, embed in documents, or host on the web.
• It features adjustable playback speed, the ability to expand and collapse thinking blocks and tool execution results, and bookmarking capabilities.

💡 Key Points

• Utilizing Local Logs: It reads conversation histories stored in ~/.claude/projects/ and recreates them with a terminal-style UI.
• Advanced Customization: Users can choose from multiple color themes (like Tokyo Night, Dracula, etc.), extract specific turns, and even automatically redact sensitive information.
• Efficiency in Sharing: It provides a lightweight, interactive replay as an alternative to heavy screen recordings or difficult-to-read text logs.

🦈 Shark’s Eye (Curator’s Perspective)

It’s groundbreaking to visualize sessions of Claude Code, including the “thought processes,” so vividly! Instead of just exporting logs, you can actually “experience” how the AI thinks and rewrites code by pressing the play button. The implementation of a self-contained HTML output, with no external libraries required, is fantastic! This means it can be easily embedded in documents, significantly improving the quality of bug reporting and demo sharing within development teams!

🚀 What’s Next?

There’s a possibility that the method of showcasing code evolution through replay will become standard in technical blogs and documents by AI engineers. Additionally, as it allows for step-by-step learning of AI’s thought processes, it’s likely to see increased usage in educational settings.

💬 Sharky’s Take

No more hassle of recording videos, and you can even copy and paste the content—this is the ultimate tool for developers! 🦈🔥

📚 Terminology Explained

• JSONL: A file format where each line contains one JSON object, used for saving session histories in Claude Code.

• Thinking Blocks: The internal reasoning processes that Claude performs before generating responses.

• Self-contained: A state where all functionalities operate without requiring other external files or servers.

• Source: es617/claude-replay