别再录屏了！把 AI 编程对话变成可交互的 HTML 回放

lxiol
  2026-04-29 20:18:28 2026-04-29 20:18:28 创建   2026-05-12 16:47:34 2026-05-12 16:47:34 更新    
📝
本文介绍AI Agent相关概念

原文链接：https://mp.weixin.qq.com/s/Pft5vHqjA3dA_HuIoJAM2A

本文介绍AI Agent相关概念

你花了两小时让 Claude Code 重构了一个模块，整个过程很精彩。同事问你怎么做的，你怎么办？

发录屏？文件 500MB，他看不完。

发日志？干巴巴的文字，工具调用和代码差异根本看不下去。

今天介绍一个开源工具 claude-replay（GitHub 650+ stars），一行命令，就能把 AI 编程会话变成可交互、可分享的 HTML 回放——一个文件就能跑，离线也能打开，嵌入博客、文档、发邮件都行。

简单来说：它把 AI 编程的”黑盒过程”变成了可阅读、可分享的”可视化叙事”。

1
`!claude-replay 界面`

它是什么？能干什么？

claude-replay 做的事情很简单：读取 AI 编程工具存在本地的会话日志 → 自动识别格式 → 渲染成交互式 HTML 回放。

目前支持五种工具：

  • Claude Code：会话在 ~/.claude/projects/ 下

~/.claude/projects/

  • Cursor：会话在 ~/.cursor/projects/ 下

~/.cursor/projects/

  • Codex CLI：会话在 ~/.codex/sessions/ 下

~/.codex/sessions/

  • Gemini CLI：会话在 ~/.gemini/tmp/ 下

~/.gemini/tmp/

  • OpenCode：通过 opencode export 导出

opencode export

零侵入——直接用工具已有的本地会话文件，不需要你改任何配置。

1
`!多工具支持`

三大核心亮点

零依赖的独立 HTML

生成的 HTML 文件完全自包含，没有外部 CSS/JS 依赖。一个文件就能跑，大小通常在几百 KB 到几 MB 之间，取决于会话长度。邮件附件、网盘分享、静态网站托管，怎么发都行。

交互式播放，不像死截图

回放页面是一个真正的播放器：

  • 播放/暂停：自动逐步推进，每块内容依次出现

  • 快进/快退：按块前进后退，点击进度条任意跳转

  • 速度控制：0.5x 到 5x 随意调

  • 计时器：实时显示已播放和总时长

这意味着你可以让别人”看”你当时的开发过程，而不是”读”一堆枯燥的日志。

思维链 & 工具调用，想看就看

Claude 的内部推理过程（thinking blocks）和工具调用（Bash、Read、Edit 等）都可以折叠/展开。

演示时，先折叠起来看整体流程。调试 bug 时，只看工具调用，快速定位问题。

1
`!折叠展开工具调用`

其他实用功能

1
2
3
4
5
`文件活动侧边栏：右侧列出本次会话中所有被操作过的文件，点击直接跳转到对应修改。长会话里找某个文件的改动，再也不用翻来翻去。
书签 & 章节导航：给任意轮次加书签，导出后变成章节。把长会话切成"环境配置"、"编写代码"、"运行测试"几个章节，做教程特别好用。
敏感信息脱敏：导出前配置脱敏规则，把 API Key、内部路径替换为 [REDACTED]。默认也会自动脱敏常见密钥格式。⚠️ 提醒：分享前务必检查，因为 HTML 里嵌了完整会话数据。多种配色主题：内置 tokyo-night、dracula 等主题，也可自定义。
实时监听模式：--serve --watch 下，AI 代理在远程服务器跑的会话，你本地浏览器能实时看到回放更新。比如你在服务器上跑一个 overnight 的 agent 任务，不需要保持 SSH 连接，打开浏览器就能看到实时进展。
!多种主题`

快速上手

安装非常简单，Node.js 18+ 就行：

1
`npm install -g claude-replay`

或者零安装，直接 npx 跑：

1
`npx claude-replay`

最简用法——通过会话 ID 一键生成：

1
`claude-replay``-o replay.html`

会话 ID 在 Claude Code 里运行 /status 就能看到。就这么一条命令，回放就出来了。

/status

1
`!Web 编辑器`

更推荐：Web 编辑器

直接运行 claude-replay（不带参数），会打开一个浏览器编辑器，自动发现你本地所有的会话。你可以浏览、编辑、预览、导出，所见即所得。

claude-replay

编辑器运行在 127.0.0.1（仅本地），不会修改你原始的会话文件——所有编辑都在内存中，只影响导出的输出。

127.0.0.1

高级玩法

合并多个会话

接受 plan 后 Claude Code 会创建新 session。把多个 session 串起来，得到完整故事线：

1
`claude-replay session-id-1 session-id-2 session-id-3 -o combined.html`

最多支持 20 个 session 合并，有时间戳的自动按时间排序。

添加书签/章节

1
2
3
4
5
`claude-replay session.jsonl \
  --mark "5:环境配置" \
  --mark "12:编写核心逻辑" \
  --mark "20:测试通过" \
  -o tutorial.html`

过滤轮次

1
2
3
4
5
`# 只看第 5 到第 15 轮
claude-replay session.jsonl --turns 5-15 -o replay.html

# 按时间范围过滤
claude-replay session.jsonl --from "2026-02-26T02:00" --to "2026-02-26T03:00" -o replay.html`

提取数据、重新生成

生成的 HTML 里嵌了完整会话数据，可以提取出来用不同参数重新生成：

1
2
`claude-replay extract replay.html -o session.jsonl
claude-replay session.jsonl -o new-replay.html --theme dracula`

这些场景，它特别好用

1
2
3
4
5
`写博客：用 AI 辅助开发了一个功能？把回放嵌到文章里，读者能一步步看到 AI 怎么思考、怎么写代码。
写文档：在文档里嵌入 AI 调试过程，比截图清晰，而且可以交互展开。
做 Demo：不用录视频了。一个 HTML 文件，体积小、可交互、随时分享。
报 Bug：与其写一堆文字描述，直接附上回放，维护者一眼就懂。
教学：带学生看 AI 的推理过程，展开 thinking block 就是最直观的教学材料。`

注意事项

  • 长会话性能：几百轮以上的超长会话，生成的 HTML 文件可能较大，在低端设备上浏览器可能会有轻微卡顿。一般日常使用（几十到上百轮）完全没有问题。

  • 移动端体验：回放页面在手机上可用，但文件侧边栏和复杂 diff 在小屏上体验不如桌面端。

  • 浏览器兼容：主流现代浏览器（Chrome、Firefox、Safari、Edge）均支持，不支持老旧浏览器。

  • 安全提醒：再次强调，分享 HTML 前务必检查敏感信息是否已脱敏。

总结

claude-replay 解决了一个真正存在的痛点：AI 编程过程不可见、不可分享。

它不需要你改配置、不需要埋点，只需要读本地已有的会话文件。输出是一个独立的 HTML 文件，零依赖、可交互、可嵌入。

下次你再用 AI 写代码，不妨把过程”录”下来——不是录屏，是用 claude-replay 生成一个 HTML，发给同事、写进博客。你会发现，分享开发过程，原来可以这么优雅。

1
2
3
`项目地址：github.com/es617/claude-replay
在线试用：体验一个真实的 Claude Code 会话回放
Live Demo：查看脱敏效果演示`

``

💬 本文评论区已开启，但暂无读者留言。

本文转载自微信公众号，如有侵权请联系删除。

  • 标题: 别再录屏了！把 AI 编程对话变成可交互的 HTML 回放
  • 作者: lxiol
  • 创建于 : 2026-04-29 20:18:28
  • 更新于 : 2026-05-12 16:47:34
  • 链接: https://blog.lxiol.cn/2026/04/29/别再录屏了把-AI-编程对话变成可交互的-HTML-回放/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
目录
别再录屏了！把 AI 编程对话变成可交互的 HTML 回放