Pagecast
English | 廣東話
The MCP server that turns agent-run browser sessions into GIFs and videos you can actually ship.
Tell your AI to record what it does. It opens a browser, does the thing, and hands you back a GIF, WebM, or MP4. You watch it happen live.
The demo below was recorded by Pagecast itself. Yes, really.
Why
You built a web app. You need a demo GIF for the README. So you:
- Open a screen recorder
- Manually click through the demo
- Export, crop, optimize
- UI changes → repeat everything
Or — you tell your AI:
"Go to https://myapp.localhost:3000, play around with it for 5 seconds and make a GIF"
The AI calls record_and_gif → outputs recordings/recording-{id}.gif. Done.
The browser is visible by default — you watch the AI work in real time.
Use Cases
| What you say | What happens | Output |
|---|---|---|
| "Record my app and make a demo GIF" | AI opens browser, interacts, exports GIF | .gif |
| "Log into dashboard, toggle dark mode, record it" | AI performs full workflow, captures everything | .webm .mp4 |
| "Submit an empty form, record what errors show up" | AI does QA, you review the recording later | .webm |
| "Walk through the signup flow and record a video" | AI creates onboarding documentation | .mp4 |
| "Post on Moltbook and record yourself doing it" | AI records its own marketing material 🤯 | .gif |
| "Record my app in 1080x1920 for an IG Reel" | AI records in vertical format for social media | .mp4 |
📐 Any size. Any platform.
Record in any viewport size — the AI opens a real browser at whatever dimension you need:
| Format | Size | For |
|---|---|---|
| 1280×720 | 16:9 | GitHub README, YouTube, docs |
| 1080×1920 | 9:16 | IG Reels, TikTok, YouTube Shorts |
| 1080×1080 | 1:1 | Instagram posts, LinkedIn |
| Custom | Any | Whatever you need |
Quick Start
Node.js ≥ 20 and ffmpeg required.
# Add to Claude Code
claude mcp add pagecast -- npx -y @mcpware/pagecast
# Or run directly
npx @mcpware/pagecast
# Headless mode (no visible browser)
claude mcp add pagecast -- npx -y @mcpware/pagecast --headless
# First time: install browser
npx playwright install chromium
MCP Tools
| Tool | What it does |
|---|---|
record_page |
Open a URL in Chromium, start recording. Returns session ID |
interact_page |
scroll, click, hover, type, press keys, select dropdowns, navigate — all captured on video |
stop_recording |
Stop and save as .webm |
convert_to_gif |
WebM → optimized GIF (two-pass palette, configurable FPS/width/trim) |
convert_to_mp4 |
WebM → MP4 (H.264, widely compatible for social/sharing/embedding) |
record_and_gif |
All-in-one: record URL for N seconds → GIF |
list_recordings |
List all .webm, .gif, and .mp4 files in output directory |
How It Works
AI → MCP tools → Playwright (headed browser + video capture)
↓
.webm recording
↓
ffmpeg two-pass palette
↓
optimized .gif / .mp4
record_pagelaunches Chromium withrecordVideoenabledinteract_pageperforms actions — scroll, click, hover, type, press keysstop_recordingflushes the video to diskconvert_to_gifruns two-pass ffmpeg: first extracts an optimal 256-color palette from all frames, then encodes with Bayer dithering. Way better quality than single-pass.
Comparison
| Tool | Automated | Interactions | Output | AI-driven |
|---|---|---|---|---|
| Pagecast | ✅ | ✅ click/type/scroll/hover | GIF + WebM + MP4 | ✅ |
| gifcap.dev | ❌ | ❌ | GIF | ❌ |
| Peek / ScreenToGif / Kap | ❌ | ❌ | GIF | ❌ |
| Playwright MCP (official) | ✅ | ✅ | Screenshot only | Partial |
| playwright-record-mcp | ✅ | ✅ | WebM only | Partial |
| VHS (Charmbracelet) | ✅ | Terminal only | GIF | ❌ |
Pagecast is the only MCP that does browser recording + AI interactions + GIF/video output.
Configuration
| Setting | Default | Notes |
|---|---|---|
| Browser | Headed (visible) | --headless for background |
| GIF FPS | 10 | Higher = smoother, larger |
| GIF width | 640px | Height auto-scaled |
| Video viewport | 1280×720 | Downscaled for GIF |
| Output dir | ./recordings |
Override: RECORDING_OUTPUT_DIR |
Architecture
src/
├── index.js # MCP server — 7 tools, stdio transport
├── recorder.js # Playwright browser lifecycle + sessions
└── converter.js # ffmpeg two-pass GIF conversion
- Headed by default — watch what the AI does
- Lazy browser — Chromium only launches on first recording
- Session-based — multiple simultaneous recordings
- One browser, multiple contexts — each recording is isolated
execFilenotexec— safe against shell injection
More from @mcpware
| Project | What it does | Install |
|---|---|---|
| UI Annotator | Hover any element to see its name — zero extensions, any browser | npx @mcpware/ui-annotator |
| Claude Code Organizer | Visual dashboard for memories, skills, MCP servers, hooks | npx @mcpware/claude-code-organizer |
| Instagram MCP | 23 tools for the Instagram Graph API | npx @mcpware/instagram-mcp |
License
MIT
