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와 압축된 트랜스크립트를 포함하므로 오프라인에서도 작동 가능하고 어디에나 호스팅할 수 있습니다.
• 다중 에이전트 지원 – 7가지 다른 에이전트의 형식을 자동 감지하고 도구 호출 이름을 공통 UI로 정규화합니다.
• 라이브 감시 모드 – --serve --watch로 로컬 서버를 실행하면 소스 트랜스크립트가 커질 때마다 리플레이를 재생성합니다. 긴 실행 시간의 에이전트 모니터링에 유용합니다.
• 웹 기반 에디터 – claude-replay에 인수 없이 실행하면 브라우저 UI가 열리며, 발견된 세션을 탐색하고, 턴을 편집하고, 북마크를 추가하고, 테마를 조정하고, 내보내기 전 최종 리플레이를 미리 보기할 수 있습니다.
• 비공개 처리 및 프라이버시 – API 키, 비밀번호 등 시크릿을 [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는 otherwise 투명한 AI 코딩 로그를 깔끔하고 공유 가능하며 인터랙티브한 경험으로 전환하여, AI 보조 개발의 커뮤니케이션, 교육, 문서화를 더 쉽게 만듭니다.