Add VHS demo tape files for terminal GIF recordings

docs/README.md

@@ -5,6 +5,7 @@ Additional documentation for mcpc.
 ## Contents
 
 - [Claude Skill](./claude-skill/) - Claude Code skill for AI agents using mcpc
+- [VHS demos](./vhs/) - VHS tape files for recording demo GIFs of mcpc
 - [CONTRIBUTING.md](../CONTRIBUTING.md) - Development, contributing, and publishing guide
 
 ## Main documentation

docs/vhs/README.md

@@ -0,0 +1,79 @@
+# mcpc demo recordings (VHS)
+
+This folder contains [VHS](https://github.com/charmbracelet/vhs) tape files
+that record terminal GIFs of mcpc. Each `.tape` is a small script that drives
+a real shell session; VHS replays it, captures the output, and renders a GIF
+(or MP4 / WebM) — no manual screen recording needed.
+
+## Prerequisites
+
+- **VHS** — `brew install vhs` (or see [installation guide](https://github.com/charmbracelet/vhs#installation))
+- **mcpc** — `npm install -g @apify/mcpc`
+- **jq** — needed by `scripting.tape`
+- **Auth (optional)** — `export APIFY_TOKEN=...` if you want the demos to hit
+  the authenticated Apify MCP server. Drop the `--header` line from the tape
+  to record an anonymous session against any public MCP server instead.
+
+## Tapes
+
+| File | Records | Notes |
+| ---- | ------- | ----- |
+| [`mcpc-demo.tape`](./mcpc-demo.tape) | Flagship overview: discover → connect → tools → grep → call → JSON → close | Source for `docs/images/mcpc-demo.gif` |
+| [`quickstart.tape`](./quickstart.tape) | Minimal "connect, list, call" flow | Hero-sized GIF for README top |
+| [`tools.tape`](./tools.tape) | `tools-list`, `tools-get`, `tools-call`, inline JSON, stdin | |
+| [`scripting.tape`](./scripting.tape) | `--json` piped through `jq` and `xargs` (code mode) | |
+| [`grep.tape`](./grep.tape) | Dynamic tool discovery with `mcpc grep` | |
+| [`proxy.tape`](./proxy.tape) | MCP proxy / AI sandboxing | |
+
+## Recording
+
+Each tape outputs a GIF in this directory. Run from inside `docs/vhs/`:
+
+```bash
+cd docs/vhs
+vhs mcpc-demo.tape          # → mcpc-demo.gif
+vhs quickstart.tape         # → quickstart.gif
+# ... etc
+```
+
+To refresh the demo embedded in the main README:
+
+```bash
+cd docs/vhs
+vhs mcpc-demo.tape
+cp mcpc-demo.gif ../images/mcpc-demo.gif
+```
+
+You can also render `.mp4` or `.webm` by editing the `Output` directive
+inside the tape file (VHS infers the format from the extension).
+
+## Customising
+
+`mcpc-demo.tape` is the template — copy it, trim the sections you don't need,
+and adjust:
+
+- `Output <file>` — destination GIF / MP4 / WebM
+- `Set Width / Set Height` — frame size (current default: 1100×650)
+- `Set FontSize` / `Set FontFamily` / `Set Theme` — appearance
+- `Set TypingSpeed` / `Sleep` — pacing
+- Server URL and `--header` — point at your own MCP server
+- Tool / argument names — swap for tools your audience cares about
+
+The other tapes use the same Set block so they look consistent side by side.
+
+## Tips
+
+- Use `Hide` / `Show` around setup commands (clearing the screen, closing
+  stale sessions, exporting `PS1`) so they don't appear in the GIF.
+- Add `Sleep` after each `Enter` so viewers have time to read the output
+  before the next command runs.
+- `Set PlaybackSpeed 1.5` speeds up the final GIF without changing the
+  recording cadence — handy for long demos.
+- Run the tape locally first (`vhs <file>.tape`) and inspect the generated
+  GIF before committing. VHS does not run inside CI by default; the tapes
+  are version-controlled but the GIFs they produce are not (the main
+  `docs/images/mcpc-demo.gif` is checked in separately).
+
+See the [VHS documentation](https://github.com/charmbracelet/vhs#vhs-command-reference)
+for the full list of directives (`Type`, `Sleep`, `Enter`, `Hide`, `Show`,
+`Wait`, `Screenshot`, all `Set …` options, etc.).

docs/vhs/grep.tape

@@ -0,0 +1,56 @@
+# mcpc grep — dynamic tool discovery across sessions
+#
+#   cd docs/vhs && vhs grep.tape
+
+Output grep.gif
+
+Require mcpc
+
+Set Shell           "bash"
+Set FontFamily      "JetBrains Mono"
+Set FontSize        16
+Set Width           1100
+Set Height          600
+Set Padding         20
+Set TypingSpeed     50ms
+Set Theme           "Catppuccin Mocha"
+Set WindowBar       Colorful
+Set WindowBarSize   32
+Set BorderRadius    8
+
+Hide
+Type "export PS1='$ '"
+Enter
+Type "mcpc connect mcp.apify.com @apify --header \"Authorization: Bearer ${APIFY_TOKEN}\" >/dev/null 2>&1 || true"
+Enter
+Type "clear"
+Enter
+Show
+
+Type "# Find tools by keyword across every live session"
+Sleep 600ms
+Enter
+Type 'mcpc grep "scraper"'
+Sleep 400ms
+Enter
+Sleep 4s
+
+Type "clear"
+Enter
+Type "# Regex + case-sensitive, limited results"
+Sleep 500ms
+Enter
+Type 'mcpc grep "search|find" -E -m 5'
+Sleep 400ms
+Enter
+Sleep 4s
+
+Type "clear"
+Enter
+Type "# Search resources and prompts too"
+Sleep 500ms
+Enter
+Type 'mcpc grep "config" --resources --prompts'
+Sleep 400ms
+Enter
+Sleep 4s

docs/vhs/mcpc-demo.tape

@@ -0,0 +1,179 @@
+# mcpc demo — flagship overview
+#
+# Generate the GIF with VHS (https://github.com/charmbracelet/vhs):
+#
+#   cd docs/vhs && vhs mcpc-demo.tape
+#
+# This produces mcpc-demo.gif in the current directory. To update the demo
+# embedded in the main README, copy it to docs/images/mcpc-demo.gif.
+#
+# Prerequisites:
+#   - VHS:  brew install vhs   (or see https://github.com/charmbracelet/vhs#installation)
+#   - mcpc: npm install -g @apify/mcpc
+#   - jq:   brew install jq    (for the scripting section)
+#   - Auth: export APIFY_TOKEN=... (or remove the --header line to use anonymous access)
+#
+# This is a template — adapt the commands below for your own server,
+# tools, and audience. Use the focused tapes in this folder
+# (quickstart.tape, tools.tape, scripting.tape, grep.tape, proxy.tape)
+# as a starting point for shorter, single-feature demos.
+
+Output mcpc-demo.gif
+
+Require mcpc
+
+# Look & feel
+Set Shell           "bash"
+Set FontFamily      "JetBrains Mono"
+Set FontSize        16
+Set Width           1100
+Set Height          650
+Set Padding         20
+Set TypingSpeed     50ms
+Set PlaybackSpeed   1.0
+Set Theme           "Catppuccin Mocha"
+Set WindowBar       Colorful
+Set WindowBarSize   32
+Set BorderRadius    8
+Set CursorBlink     true
+
+# Hidden setup: clean prompt, no scrollback, fresh state
+Hide
+Type "export PS1='$ '"
+Enter
+Type "mcpc @apify close 2>/dev/null; mcpc @fs close 2>/dev/null; true"
+Enter
+Type "clear"
+Enter
+Show
+
+# 1. Discover mcpc
+Type "# mcpc — a universal MCP CLI client"
+Sleep 800ms
+Enter
+Sleep 600ms
+
+Type "mcpc --help | head -25"
+Sleep 400ms
+Enter
+Sleep 4s
+
+Type "clear"
+Enter
+Sleep 300ms
+
+# 2. List sessions and OAuth profiles
+Type "# No sessions or profiles yet"
+Sleep 600ms
+Enter
+Sleep 400ms
+
+Type "mcpc"
+Sleep 400ms
+Enter
+Sleep 3s
+
+# 3. Connect to a remote MCP server
+Type "# Connect to Apify's MCP server as session @apify"
+Sleep 600ms
+Enter
+Sleep 400ms
+
+Type 'mcpc connect mcp.apify.com @apify --header "Authorization: Bearer ${APIFY_TOKEN}"'
+Sleep 400ms
+Enter
+Sleep 3s
+
+# 4. Server info, capabilities, instructions
+Type "# Show server capabilities and instructions"
+Sleep 600ms
+Enter
+Sleep 400ms
+
+Type "mcpc @apify"
+Sleep 400ms
+Enter
+Sleep 4s
+
+Type "clear"
+Enter
+Sleep 300ms
+
+# 5. List available tools
+Type "# List available tools"
+Sleep 600ms
+Enter
+Sleep 400ms
+
+Type "mcpc @apify tools-list | head -15"
+Sleep 400ms
+Enter
+Sleep 4s
+
+# 6. Dynamic tool discovery
+Type "clear"
+Enter
+Type "# Find tools by keyword — useful for AI agents"
+Sleep 600ms
+Enter
+Sleep 400ms
+
+Type 'mcpc @apify grep "scraper"'
+Sleep 400ms
+Enter
+Sleep 4s
+
+# 7. Inspect a tool's schema
+Type "clear"
+Enter
+Type "# Inspect a tool's input schema"
+Sleep 600ms
+Enter
+Sleep 400ms
+
+Type "mcpc @apify tools-get search-actors"
+Sleep 400ms
+Enter
+Sleep 5s
+
+# 8. Call a tool
+Type "clear"
+Enter
+Type "# Call a tool with key:=value arguments"
+Sleep 600ms
+Enter
+Sleep 400ms
+
+Type 'mcpc @apify tools-call search-actors keywords:="web scraper" limit:=3'
+Sleep 400ms
+Enter
+Sleep 5s
+
+# 9. JSON mode + jq for scripting (code mode)
+Type "clear"
+Enter
+Type "# JSON mode composes with jq for scripts and agents"
+Sleep 600ms
+Enter
+Sleep 400ms
+
+Type "mcpc --json @apify tools-list | jq -r '.[].name' | head -5"
+Sleep 400ms
+Enter
+Sleep 4s
+
+# 10. Close the session
+Type "# Close the session when done"
+Sleep 600ms
+Enter
+Sleep 400ms
+
+Type "mcpc @apify close"
+Sleep 400ms
+Enter
+Sleep 2s
+
+Type "# Learn more: https://github.com/apify/mcpc"
+Sleep 2s
+Enter
+Sleep 1500ms

docs/vhs/proxy.tape

@@ -0,0 +1,69 @@
+# mcpc proxy — AI sandbox: expose a credentialed session without leaking tokens
+#
+#   cd docs/vhs && vhs proxy.tape
+
+Output proxy.gif
+
+Require mcpc
+
+Set Shell           "bash"
+Set FontFamily      "JetBrains Mono"
+Set FontSize        16
+Set Width           1200
+Set Height          700
+Set Padding         20
+Set TypingSpeed     50ms
+Set Theme           "Catppuccin Mocha"
+Set WindowBar       Colorful
+Set WindowBarSize   32
+Set BorderRadius    8
+
+Hide
+Type "export PS1='$ '"
+Enter
+Type "mcpc @relay close 2>/dev/null; mcpc @sandbox close 2>/dev/null; true"
+Enter
+Type "clear"
+Enter
+Show
+
+Type "# Human authenticates once and exposes a localhost MCP proxy"
+Sleep 600ms
+Enter
+Type 'mcpc connect mcp.apify.com @relay --header "Authorization: Bearer ${APIFY_TOKEN}" --proxy 8080'
+Sleep 400ms
+Enter
+Sleep 4s
+
+Type "# The proxy forwards MCP traffic but hides the upstream token"
+Sleep 600ms
+Enter
+Type "mcpc"
+Sleep 400ms
+Enter
+Sleep 4s
+
+Type "clear"
+Enter
+Type "# An AI agent (or another tool) connects to the proxy as a normal MCP server"
+Sleep 600ms
+Enter
+Type "mcpc connect localhost:8080 @sandbox"
+Sleep 400ms
+Enter
+Sleep 3s
+
+Type "mcpc @sandbox tools-list | head -8"
+Sleep 400ms
+Enter
+Sleep 5s
+
+Type "clear"
+Enter
+Type "# Tear down both sides"
+Sleep 500ms
+Enter
+Type "mcpc @sandbox close && mcpc @relay close"
+Sleep 400ms
+Enter
+Sleep 2s