claude-replay – Share AI Coding Sessions as Interactive HTML Replays

TL;DR

TL;DR: claude-replay transforms AI coding session logs from Claude Code, Cursor, Codex CLI, Gemini CLI, OpenCode, and Kimi Code into shareable, self-contained HTML replays — installable via npm or runnable with zero install via npx.

What Is claude-replay?

AI coding agents produce rich session logs, but sharing them means either bulky screen recordings or hard-to-navigate transcript dumps. claude-replay solves this by converting session logs into interactive, self-contained HTML files you can email, embed in documentation, or host anywhere.

From the README:

AI coding sessions are great for development, but hard to share. Screen recordings are bulky and transcripts are hard to navigate. claude-replay turns Claude Code, Cursor, Codex CLI, Gemini CLI, OpenCode, and Kimi Code session logs into interactive, shareable HTML replays.

The output is a single HTML file with no external dependencies. It auto-detects the transcript format from each tool and renders:

• Interactive playback with speed control
• Collapsible tool calls and thinking blocks (Claude’s internal reasoning traces)
• Bookmarks and chapters
• Terminal-style bottom-to-top scroll
• File activity sidebar showing which files were touched
• Secret redaction before export
• Multiple color themes (bubbles, dracula, github-light, monokai, solarized-dark, tokyo-night)
• Live watch mode for monitoring sessions in real time

Supported Tools and Transcript Locations

| Source | Transcript location | |---|---| | Claude Code | ~/.claude/projects/<project>/ | | Cursor | ~/.cursor/projects/<project>/agent-transcripts/<id>/ | | Codex CLI | ~/.codex/sessions/<date>/ | | Gemini CLI | ~/.gemini/tmp/<projectHash>/chats/ | | OpenCode | Export via opencode export <sessionID> | | Kimi Code | ~/.kimi-code/sessions/<project>/<session>/agents/<name>/wire.jsonl |

Installation

claude-replay requires Node.js 18+.

# Global install
npm install -g claude-replay

# Or run without installing
npx claude-replay

Docker

docker run --rm --init -p 7331:7331 \
  -v ~/.claude/projects:/root/.claude/projects:ro \
  ghcr.io/es617/claude-replay

Core Workflow

1. Convert a session to HTML

Point claude-replay at a transcript directory and it auto-detects the tool:

claude-replay ~/.claude/projects/my-project/

This produces a single session-replay.html you can share or host anywhere.

2. Serve and watch live

Monitor an active session as it runs on a remote machine:

claude-replay --serve --watch ~/.claude/projects/my-project/

Open http://localhost:7331 to watch the session replay in real time.

3. Embed in documentation

The output HTML is fully self-contained. Drop it in any static host, or embed via iframe:

<iframe src="/session-replay.html" width="100%" height="600"></iframe>

4. Redact secrets before sharing

claude-replay --redact "API_KEY,OPENAI_TOKEN" ~/.claude/projects/my-project/

Use Cases

• Blog posts — show AI-assisted development sessions interactively instead of pasting transcript walls
• Documentation — embed AI debugging sessions or code walkthroughs
• Demos — share reproducible sessions without video
• Bug reports — attach a replay instead of long logs
• Teaching — step through AI reasoning and tool usage with students
• Live monitoring — watch agent sessions in real time on remote machines or containers

Source and Accuracy Notes

• Project page: es617.dev/claude-replay
• Source repository: github.com/es617/claude-replay
• License: MIT (verified via README badge)
• HN launch thread: news.ycombinator.com/item?id=47503166
• Current version: v0.10.0 (verified via GitHub Releases API)
• Source last checked: 2026-07-25 (commit main branch)

FAQ

Q: Does claude-replay work with all AI coding tools? A: It supports Claude Code, Cursor, Codex CLI, Gemini CLI, OpenCode, and Kimi Code. Each tool stores transcripts differently, and claude-replay auto-detects the format. See the table above for transcript locations.

Q: Is the output HTML truly self-contained? A: Yes. The generated HTML has zero external dependencies — everything (CSS, JS, assets) is inlined. You can email it as an attachment, host it on any static server, or put it on a USB drive.

Q: Can I watch a session live while the agent is still running? A: Yes. Use --serve --watch to monitor a session directory in real time. This is useful for watching remote CI agents or shared development environments.

Q: How does redaction work? A: Pass --redact "token1,token2" and matching strings are replaced with [REDACTED] in the output HTML before export.

Q: Is claude-replay affiliated with Anthropic? A: No. The README includes an explicit “Community tool — not affiliated with or endorsed by Anthropic” disclaimer.

Conclusion

claude-replay fills a practical gap: AI coding sessions are rich and worth sharing, but the default formats (logs, transcripts, screen recordings) are either hard to navigate or heavy to distribute. If you write about AI-assisted development, review agent sessions for audits, or need to share reproducible debugging traces, this tool is worth a look.

Install it with npm install -g claude-replay or try it instantly with npx claude-replay.