mcpware/pagecast

**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.
Without Pagecast — plain screen recording, you do the demonstration yourself and record yourself and you need to repead every time you changed the UI. You can see the cursor moving, but the actual interactions are too small to follow:
With Pagecast (tooltip mode) — a magnified close-up appears on every interaction so viewers can actually see what's happening, and it design what to demo and make a new demo gif automatically:
With Pagecast (cinematic mode) — the camera crops and pans to follow each action, and it design what to demo and make a new demo gif automatically:
Two ways to use Pagecast
1. Product demo tool (the main use case)
You built a web app. You need a demo GIF for the README. Normally you'd:
1. Open a screen recorder, manually click through the demo
2. Open a video editor, zoom into the important parts
3. Export, figure out ffmpeg, optimize the file size
4. UI changes → repeat everything
**With Pagecast**, you tell your AI:
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.
2. Screen recording tool (also works)
Don't need zoom effects? Pagecast works as a plain screen recorder too:
The AI records, you get a .webm → optimized .gif or .mp4. Two-pass ffmpeg palette optimization, platform-aware sizing, one tool call.
Export Modes
| 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 |
Just Say Where It's Going
You don't need to know viewport sizes or formats. Just tell your AI the destination:
| 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 |
Quick Start
**Node.js ≥ 20** and **ffmpeg** required.
How It Works
**What makes the demo look professional:**
- **Cursor highlight** — red dot tracks the mouse so viewers can follow the action
- **Click ripple** — visual feedback on every click
- **Tooltip overlay** — magnified close-up appears near each interaction, with a small arrow pointing toward it
- **Cinematic pan** — smooth crop transitions between interaction targets with easeInOut curves
MCP Tools
| 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 |