LLM Chat Replay

LLM チャットリプレイ

LLM のチャット記録を、タイピングアニメーションと再生コントロール付きで視覚的に再生する React アプリケーションです。AI アシスタントとの会話（Claude など）向けに作成されていますが、指定の形式に従った任意の Markdown チャットエクスポートで動作します。

機能

• Markdown ファイルのドラッグ＆ドロップによるアップロード
• 再生コントロール（再生／一時停止）
• 再生速度の調整（0.5x～4x）
• プログレスバーでの再生位置の調整
• スマートなスクロール動作に対応したチャットウィンドウの自動スクロール
• Human と Assistant のメッセージを区別する吹き出し
• Assistant の応答に対するタイピングアニメーション
• 会話タイトルの自動抽出と表示

デモ

次の形式の Markdown の会話記録をドロップしてください。

# Title of Conversation

**Human**: Your question or prompt here

**Assistant**: The assistant's response here

はじめに

前提条件

• Node.js（v16+）
• npm または yarn

インストール

git clone https://github.com/yourusername/llm-chat-replay.git
cd llm-chat-replay
npm install
npm run dev

使い方

1. npm run dev を使ってアプリケーションを起動します
2. 保存した Markdown の会話記録ファイルをインターフェースにドロップするか、クリックしてファイルを選択します
3. 再生コントロールを使って会話を再生します
4. チャットの下にあるコントロールで、必要に応じて速度を調整します
5. プログレスバーを使って、会話の特定の箇所に移動します

互換性のある会話記録の作成

AI アシスタントとのチャットでは、通常、会話記録のエクスポートを依頼できます。

Ask the assistant: "please save the full transcript of this chat as a markdown file"

保存した Markdown ファイルでは、各メッセージの先頭に「Human:」と「Assistant:」のマーカーを付けてください。

一貫した形式の会話記録を作成するための事前プロンプト

最良の結果を得るには、適切な形式の会話記録を作成できるよう、この事前プロンプトを AI アシスタントの設定（.clinerules など）に追加してください。

### Chat Transcripts
When asked to save a chat or a transcript, here are some rules that will allow you to replay chat in the LLM chat replay tool.

Please save a complete, properly formatted transcript of our conversation to the filesystem using tools. When creating this transcript:

1. Come up with a title for the chat, and add it to the document at the beginning as "# Title:  [title]"
2. Format with `**Human**:` and `**Assistant**:` prefixes exactly as shown.. that's:
	- Two asterisks (`**`)
	- The identifier (Human or Assistant)
	- Two asterisks (`**`)
	- A colon (`:`)
	- A space
	- Then the message content
3. Preserve all original text formatting, but avoid special characters that might break markdown
4. For any file paths or code:
   - Place them on their own lines when possible
   - Wrap them in backticks like `this`
   - Avoid ending lines with underscores or other markdown-sensitive characters
5. For function calls and results:
   - Format them as <function_call> relevant information</function_call>
   - Format them as <function_result>relevant information</function_result>
   - Ensure they're on their own lines
   - summarize the function results and don't print the entire thing. resist having any markdown inside the function results, as it causes formatting errors.
6. Maintain proper spacing between paragraphs
7. Use standard markdown for any lists or formatting
8. Save the file with a descriptive name in the format: chat_YYYYMMDD_topic_name.md

Please ensure the transcript contains our complete conversation with all content preserved, and ready to be played back in the chat replay tool.

使用技術

• React + Vite
• TypeScript
• Tailwind CSS
• タイピングアニメーション用の Typed.js

コントリビューション

コントリビューションを歓迎します。お気軽に Pull Request を送信してください。

ライセンス

このプロジェクトは MIT License の下でライセンスされています。詳細については LICENSE ファイルをご覧ください。