# Recording docs/demo.gif

The README and the Integrations page reference mcp/docs/demo.gif (also copied to hfmarketdata/web/public/downloads/mcp-demo.gif when it exists). It is not committed yet — record it like this.

# Setup (once)

brew install vhs            # charmbracelet/vhs: scripted terminal recordings → GIF
cd mcp && npm run build && npm i -g ./$(npm pack --silent)
claude mcp add hfmarketdata -e HFMD_API_KEY=$HFMD_API_KEY -- hfmarketdata-mcp

# Script — scripts/demo.tape

Output docs/demo.gif
Set Theme "Catppuccin Mocha"
Set FontSize 15
Set Width 1240
Set Height 720
Set TypingSpeed 40ms

Type "claude"
Enter
Sleep 3s
Type "Plot me the CL term structure as an ASCII chart and tell me if it is in contango"
Enter
Sleep 18s
Type "Compare ESZ25 and ESH26 over 30 days"
Enter
Sleep 18s
Type "Screen US stocks with PE<15 and FCF yield>6% and show their last 3 quarters"
Enter
Sleep 20s
Ctrl+C

vhs scripts/demo.tape        # writes docs/demo.gif (~4-8 MB; keep it under 10 MB — lower Width or Sleep if needed)

# Manual alternative

1. QuickTime Player → File → New Screen Recording, select the terminal window (1240×720 px area).
2. Run the three prompts above in Claude Code with the hfmarketdata server enabled.
3. Convert: ffmpeg -i demo.mov -vf "fps=12,scale=1240:-1:flags=lanczos" -loop 0 docs/demo.gif (or gifski --fps 12 --width 1240 -o docs/demo.gif demo.mov).

# Checklist before committing the GIF

• No API key visible (use HFMD_API_KEY=… from the environment, never typed on screen).
• Shows at least one tool call line (get_term_structure, get_bars) and one result table.
• < 10 MB; first frame readable (the GIF is the README hero).
• Copy to hfmarketdata/web/public/downloads/mcp-demo.gif so the Integrations page can display it without external CDNs.