# 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)

```bash
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`

```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
```

```bash
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.