LLM Chat Replay
by jonmadison
LLM Chat Replay is a React application that provides a visual replay of LLM chat transcripts. It features typing animation and playback controls for AI assistant conversations.
Last updated: N/A
What is LLM Chat Replay?
LLM Chat Replay is a React application designed to visually replay LLM chat transcripts, simulating a real-time conversation with typing animations and playback controls. It's built to work with markdown chat exports, particularly those from AI assistants like Claude.
How to use LLM Chat Replay?
To use LLM Chat Replay, clone the repository, install the dependencies using npm or yarn, and run the application using npm run dev. Then, drop a markdown transcript file into the interface or click to browse. Use the playback controls to replay the conversation, adjust the speed, and use the progress bar to jump to specific parts.
Key features of LLM Chat Replay
Drag and drop markdown file upload
Playback controls (play/pause)
Speed control (0.5x to 4x)
Progress bar scrubbing
Auto-scrolling chat window with smart scroll behavior
Distinct bubbles for Human and Assistant messages
Typing animation for Assistant responses
Automatically extracts and displays conversation title
Use cases of LLM Chat Replay
Reviewing AI assistant conversations
Demonstrating AI assistant capabilities
Creating engaging tutorials
Analyzing chat transcripts
Debugging AI assistant interactions
FAQ from LLM Chat Replay
What file format does the application support?
What file format does the application support?
The application supports markdown files with a specific format: '# Title of Conversation', 'Human: Your question or prompt here', 'Assistant: The assistant's response here'.
How do I create a compatible transcript?
How do I create a compatible transcript?
Request a transcript export from your AI assistant and ensure it's formatted with 'Human:' and 'Assistant:' markers at the beginning of each message.
Can I adjust the playback speed?
Can I adjust the playback speed?
Yes, you can adjust the playback speed from 0.5x to 4x using the controls below the chat.
Does the application support auto-scrolling?
Does the application support auto-scrolling?
Yes, the application features an auto-scrolling chat window with smart scroll behavior.
What technologies are used to build this application?
What technologies are used to build this application?
The application is built with React + Vite, TypeScript, Tailwind CSS, and Typed.js for typing animation.