Real-time viewer for Claude Code sessions. Watch your AI coding process live, share with anyone via a URL.
Zero dependencies — single file Node.js server, no install needed.
Live Demo: Watch this project being built in real-time
Built-in sensitive data filtering — API keys, tokens, passwords, and other secrets are automatically redacted from displayed content. However, please review your session content before sharing as automated filtering may not catch everything.
- Auto-discovers all Claude Code projects from
~/.claude/projects/ - Live streaming via SSE — messages appear as they happen
- Project-based view with pagination and scroll navigation
- Share individual projects via token-protected URLs
- Displays user messages, assistant responses, thinking, tool calls and results
- Smart tool rendering: specialized formatters for Bash, Read, Write, Edit, Grep/Glob, Agent, TodoWrite, WebSearch
- Tool result detection: syntax-highlighted code, formatted JSON, diff with colors, rendered markdown
- Thinking blocks rendered as markdown with expand/collapse for long content
- Slash commands displayed as formatted terminal-style bubbles instead of raw XML
- Dark theme, monospace, mobile-friendly
- Automatic sensitive data redaction (API keys, tokens, passwords, private keys)
Shared pages support danmaku — real-time bullet comments that float across the screen, creating a live-stream atmosphere for viewers.
- Send comments: Type text or pick emoji from the input bar at the bottom of any shared page
- Auto nickname: A random Chinese adjective+noun nickname is generated on first visit, editable anytime (persisted in localStorage)
- Live broadcast: New comments are pushed to all viewers via SSE in real-time
- History playback: Past comments replay automatically when the page loads
- Toggle on/off: Dimmed toggle button, state saved across sessions
- Performance: Pure CSS animations, max 15 simultaneous comments on screen
- Content limits: 200 chars per comment, 20 chars per nickname, HTML-escaped for safety
# Start the server
node server.js
# Open in browser
open http://localhost:3456That's it — all your Claude Code sessions appear in the sidebar, grouped by project.
# Install ngrok if you haven't
# brew install ngrok
# Create a public URL
ngrok http 3456Set the public URL in .env so share links use the correct domain:
CC_LIVE_PUBLIC_URL=https://your-subdomain.ngrok-free.dev
# Install cloudflared if you haven't
# brew install cloudflared
# Create a public URL
cloudflared tunnel --url http://localhost:3456Set the public URL in .env:
CC_LIVE_PUBLIC_URL=https://your-subdomain.trycloudflare.com
- Click the Share button next to any project in the sidebar
- Copy the generated URL — it contains a random token, no project name exposed
- Revoke anytime from the Active Shares panel at the bottom of the sidebar
Share tokens persist across server restarts — they only expire when explicitly revoked.
Environment variables (set in .env or shell):
| Variable | Default | Description |
|---|---|---|
CC_LIVE_PORT |
3456 |
Server port |
CLAUDE_DIR |
~/.claude |
Claude config directory |
CC_LIVE_PUBLIC_URL |
— | Public tunnel URL for share links |
CC_LIVE_REDACT_<N> |
— | Custom redaction rules (see below) |
Add custom patterns beyond the built-in ones via CC_LIVE_REDACT_1, CC_LIVE_REDACT_2, etc.:
# Plain string — exact match replaced with ***REDACTED***
CC_LIVE_REDACT_1="my-company-internal-domain.com"
# Regex — /pattern/→replacement
CC_LIVE_REDACT_2="/\bmy-app-[a-z0-9]{12}\b/→***APP-ID***"- Scans
~/.claude/projects/for JSONL session files (up to 50 projects, 7-day recency) - Loads last 200 messages per session as history, then tails for new content
- Parses messages and streams via SSE to connected browsers
- Every 10s rescans for new sessions
- Read-only — viewers cannot interact with the session
- Session data is in-memory only (up to 500 messages per session, then trimmed to 300)
- Share tokens persist across restarts (stored in
data/share-tokens.json)
MIT