README.md
Record any browser page as GIF or video via MCP
Pagecast
English | 廣東話
Playwright gives you raw .webm. Pagecast gives you shipping-ready GIF or MP4.
Built-in ffmpeg two-pass palette optimization. One MCP tool call. Done.
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, figure out ffmpeg, optimize
- UI changes → repeat everything
Or — you tell your AI:
"Record a demo of localhost:3000 for my GitHub README"
The AI calls record_and_export with platform: "github" → outputs an optimized GIF. Done.
"Record my app for Instagram Reels"
The AI calls record_and_export with platform: "reels" → outputs a 1080×1920 MP4. Done.
The browser is visible by default — you watch the AI work in real time.
Just Say Where It's Going
You don't need to know viewport sizes or formats. Just tell your AI the destination:
"Record a demo of my app for GitHub README" → 1280×720 GIF
"Record my app for Instagram Reels" → 1080×1920 MP4
"Make a TikTok demo of my dashboard" → 1080×1920 MP4
"Record a YouTube video of the signup flow" → 1280×720 MP4
"Record for YouTube Shorts" → 1080×1920 MP4
"Make an Instagram post demo" → 1080×1080 MP4
"Record a demo for LinkedIn" → 1080×1080 MP4
"Record for Twitter" → 1280×720 MP4
Pagecast maps platform names to the right size and format automatically:
| Platform | Size | Format | Aspect |
|---|---|---|---|
github / readme |
1280×720 | GIF | 16:9 |
youtube / twitter |
1280×720 | MP4 | 16:9 |
reels / tiktok / shorts |
1080×1920 | MP4 | 9:16 |
instagram / linkedin |
1080×1080 | MP4 | 1:1 |
| Custom | Any size | Your choice | Any |
Did you know? Just changing the viewport size turns your AI-recorded demo into content for any platform. Most people don't realize this is possible.
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 | .mp4 |
| "Submit an empty form, record what errors show up" | AI does QA, you review the recording later | .mp4 |
| "Walk through the signup flow for our TikTok" | AI records in 9:16 vertical format | .mp4 |
| "Post on Moltbook and record yourself doing it" | AI records its own marketing material 🤯 | .gif |
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, start recording. Accepts platform for auto-sizing |
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 (ffmpeg two-pass palette, configurable FPS/width/trim) |
convert_to_mp4 |
WebM → MP4 (H.264, ready for social/sharing/embedding) |
record_and_export |
All-in-one: record → auto-export to GIF or MP4 based on platform |
list_recordings |
List all .webm, .gif, and .mp4 files in output directory |
How It Works
You: "Record my app for Instagram Reels"
↓
AI → record_and_export(platform: "reels")
↓
Playwright (headed browser, 1080×1920)
↓
.webm recording
↓
ffmpeg two-pass optimization
↓
shipping-ready .mp4 (9:16)
record_pagelaunches Chromium withrecordVideoenabled at the right viewport sizeinteract_pageperforms actions — scroll, click, hover, type, press keysstop_recordingflushes the video to diskconvert_to_gif/convert_to_mp4runs ffmpeg — for GIF, that's two-pass palette extraction + Bayer dithering (way better quality than single-pass)
Comparison
| Automated | Interactions | Output | AI-driven | Platform presets | Built-in ffmpeg | |
|---|---|---|---|---|---|---|
| Pagecast | ✅ | ✅ click/type/ |
Tools (7)
record_pageOpen a URL and start recording, with optional platform-based auto-sizing.interact_pagePerform browser interactions like scroll, click, hover, type, and navigation.stop_recordingStop the current recording and save it as a .webm file.convert_to_gifConvert a WebM recording to an optimized GIF using two-pass palette extraction.convert_to_mp4Convert a WebM recording to an MP4 file.record_and_exportAll-in-one tool to record and export to GIF or MP4 based on a platform preset.list_recordingsList all recorded files in the output directory.Configuration
claude_desktop_config.json
{"mcpServers": {"pagecast": {"command": "npx", "args": ["-y", "@mcpware/pagecast"]}}}Try it
→Record a demo of localhost:3000 for my GitHub README.
→Record my app for Instagram Reels.
→Log into my dashboard, toggle dark mode, and record the process.
→Record a YouTube video of the signup flow for my website.
→Submit an empty form on my site and record the error messages.