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 增强开发的沟通、教学和文档编写更加容易。