Record any browser page as GIF or video via MCP
Record any browser page as GIF or video via MCP
Valid MCP server (1 strong, 1 medium validity signals). 1 known CVE in dependencies (0 critical, 1 high severity) Package registry verified. Imported from the Official MCP Registry. Trust signals: trusted author (5/5 approved).
4 files analyzed · 2 issues found
Security scores are indicators to help you make informed decisions, not guarantees. Always review permissions before connecting any MCP server.
This plugin requests these system permissions. Most are normal for its category.
Add this to your MCP configuration file:
{
"mcpServers": {
"io-github-mcpware-pagecast": {
"args": [
"-y",
"@mcpware/pagecast"
],
"command": "npx"
}
}
}From the project's GitHub README.
English | 廣東話
Turn AI browser interactions into polished product demos.
Tell your AI to demo your app. Pagecast records the browser, tracks every click and keystroke, and exports a shipping-ready GIF or MP4 — with tooltip zoom overlays and cinematic pan effects. No screen recorder. No video editor. No post-production. Make a demo gif automatically after every PR if you want.



You built a web app. You need a demo GIF for the README. Normally you'd:
With Pagecast, you tell your AI:
"Record a demo of localhost:3000 for my GitHub README"
The AI opens a real browser, interacts with your app, and exports a polished GIF with auto-zoom on every interaction. UI changes? Just re-run. The demo rebuilds itself.
Don't need zoom effects? Pagecast works as a plain screen recorder too:
"Record my app for 10 seconds and export as MP4"
The AI records, you get a .webm → optimized .gif or .mp4. Two-pass ffmpeg palette optimization, platform-aware sizing, one tool call.
| Mode | Tool | What it does | Best for |
|---|---|---|---|
| Tooltip | smart_export | Full viewport visible + magnified tooltip inset near each interaction | README demos, product pages |
| Cinematic | cinematic_export | Camera crops and pans to follow each interaction | Social media, dramatic reveals |
| Plain | convert_to_gif / convert_to_mp4 | Standard screen recording, no zoom effects | Bug reports, QA captures |
You don't need to know viewport sizes or formats. Just tell your AI the destination:
"Record a demo 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 for YouTube" → 1280×720 MP4
| 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 |
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
You: "Record a demo of my app"
↓
AI → record_page(url, platform: "github")
Opens Chromium (visible) at 1280×720
Injects cursor highlight + click ripple
↓
AI → interact_page(click, type, hover...)
Each action records bounding box + timestamp
↓
AI → stop_recording
Saves .webm + timeline.json
↓
AI → smart_export (tooltip mode)
or cinematic_export (crop-pan mode)
or convert_to_gif (plain mode)
↓
Shipping-ready .gif or .mp4
What makes the demo look professional:
| Tool | What it does |
|---|---|
record_page | Open a URL, start recording. Auto-injects cursor highlight + click ripple |
interact_page | scroll, click, hover, type, press keys, select, navigate, waitForSelector — all captured with bounding boxes |
stop_recording | Stop and save .webm + -timeline.json (event timeline with interaction positions) |
smart_export | Tooltip overlay — magnified tooltip close-up on each interaction |
cinematic_export | Cinematic crop-pan — camera follows the action between interaction targets |
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 |
| Automated | Interactions | Demo zoom | Output | AI-driven | Platform presets | |
|---|---|---|---|---|---|---|
| Pagecast | ✅ | ✅ click/type/scroll/hover | ✅ tooltip + cinematic | GIF + WebM + MP4 | ✅ | ✅ |
| Screen Studio | ❌ manual | ❌ | ✅ cursor-based | MP4 | ❌ | ❌ |
| AutoZoom | ❌ manual | ❌ | ✅ click-based | MP4 | ❌ | ❌ |
| Playwright MCP | ✅ | ✅ | ❌ | Raw .webm | Partial | ❌ |
| gifcap.dev / Peek / Kap | ❌ manual | ❌ | ❌ | GIF | ❌ | ❌ |
| VHS (Charmbracelet) | ✅ scripted | Terminal only | ❌ | GIF | ❌ | ❌ |
Screen Studio and AutoZoom have great zoom — but require manual recording. Pagecast is the only tool where the AI records AND the demo effects are automatic.
| Setting | Default | Notes |
|---|---|---|
| Browser | Headed (visible) | --headless for background |
| GIF FPS | 12 | Higher = smoother, larger |
| GIF width | 800px | Height auto-scaled |
| Tooltip magnify | 1.6x | How much the tooltip zooms in |
| Tooltip size | 380px | Size of the tooltip inset |
| Cinematic zoom | 2.5x | How much the camera zooms in |
| Zoom transition | 0.35s | Smoothstep ease-in/out duration |
| Cursor overlay | On | Red dot + click ripple effect |
| Video viewport | 1280×720 | Or use platform parameter |
| Output dir | ./recordings | Override: RECORDING_OUTPUT_DIR |
src/
├── index.js # MCP server — 9 tools, platform presets, stdio transport
├── recorder.js # Playwright browser lifecycle + sessions + event timeline
├── converter.js # ffmpeg GIF/MP4 + tooltip overlay + cinematic zoom conversion
├── zoom.js # Zoom engine — chains, panning, tooltip events, FFmpeg expressions
├── tooltip.js # Tooltip PNG generator (rounded rect + arrow, pure Node.js)
└── remotion/
├── ZoomComposition.jsx # React composition for cinematic zoom
├── Root.jsx # Remotion entry point
└── render.js # Remotion CLI wrapper
execFile not exec — safe against shell injection| Project | What it does | Install |
|---|---|---|
| Instagram MCP | 23 Instagram Graph API tools — posts, comments, DMs, stories, analytics | npx @mcpware/instagram-mcp |
| Claude Code Organizer | Visual dashboard for Claude Code memories, skills, MCP servers, hooks | npx @mcpware/claude-code-organizer |
| UI Annotator | Hover labels on any web page — AI references elements by name | npx @mcpware/ui-annotator |
| LogoLoom | AI logo design → SVG → full brand kit export | npx @mcpware/logoloom |
MIT
Be the first to review this server!
by Modelcontextprotocol · Developer Tools
Read, search, and manipulate Git repositories programmatically
by Toleno · Developer Tools
Toleno Network MCP Server — Manage your Toleno mining account with Claude AI using natural language.
by mcp-marketplace · Developer Tools
Create, build, and publish Python MCP servers to PyPI — conversationally.
by Microsoft · Content & Media
Convert files (PDF, Word, Excel, images, audio) to Markdown for LLM consumption
by mcp-marketplace · Developer Tools
Scaffold, build, and publish TypeScript MCP servers to npm — conversationally
by mcp-marketplace · Finance
Free stock data and market news for any MCP-compatible AI assistant.