Pagecast

Record any browser page as GIF or video via MCP — powered by Playwright + ffmpeg.

AI assistants can record browser sessions, perform interactions (scroll, click, hover), and export optimized GIFs or video — perfect for demo content, documentation, and recording automated workflows.

The Problem

Creating demo GIFs and recording browser sessions is manual and tedious:

1. Open a screen recorder
2. Manually perform the demo
3. Export and optimize the GIF
4. Repeat when the UI changes

Pagecast lets AI assistants do this programmatically. Record what the browser does, export as GIF or video.

How It Works

AI Assistant → MCP tools → Playwright (browser + video recording)
                                ↓
                         .webm video file
                                ↓
                    ffmpeg two-pass palette → optimized .gif

1. record_page opens a URL in Chromium with video recording enabled
2. interact_page scrolls, clicks, hovers — all captured in the recording
3. stop_recording saves the .webm file
4. convert_to_gif creates an optimized GIF using ffmpeg's two-pass palette method

Tools

Quick Start

Prerequisites

• Node.js ≥ 20
• ffmpeg (sudo apt install ffmpeg / brew install ffmpeg)
• Chromium (auto-installed with Playwright)

Add to Claude Code

claude mcp add pagecast -- npx -y @mcpware/pagecast

Or run directly

npx @mcpware/pagecast

Headless mode (no visible browser window)

claude mcp add pagecast -- npx -y @mcpware/pagecast --headless

By default, Pagecast opens a visible browser window so you can see what's being recorded. Use --headless for background recording.

Install Playwright browsers (first time only)

npx playwright install chromium

Use Cases

Usage Examples

Simple: Record a page for 5 seconds

Ask your AI assistant:

"Record https://myapp.localhost:3000 for 5 seconds and make a GIF"

The assistant calls record_and_gif → outputs recordings/recording-{id}.gif

Demo GIF with interactions

"Record my app at localhost:3000. Scroll down slowly, hover over the navbar, then stop and make a GIF"

1. record_page → starts recording
2. interact_page → scrolls, hovers (all captured on video)
3. stop_recording → saves .webm
4. convert_to_gif → optimized GIF for README

Record a full automation session

"Log into the dashboard, navigate to settings, toggle dark mode, and record the whole thing"

1. record_page → opens the page and starts recording
2. interact_page → clicks through the UI (multiple action sequences)
3. stop_recording → saves the full session as .webm
4. Keep as video for review, or convert_to_gif for a short clip

QA evidence capture

"Go to the payments page, try submitting an empty form, and record what error messages appear"

1. record_page → starts recording
2. interact_page → navigates, clicks submit, waits for errors
3. stop_recording → saves as evidence .webm

Comparison

GIF Quality

Uses ffmpeg's two-pass palette method for optimal quality:

1. Pass 1: Analyzes all frames to build an optimal 256-color palette (palettegen=stats_mode=diff)
2. Pass 2: Encodes GIF using that palette with Bayer dithering (paletteuse=dither=bayer)

This produces dramatically better quality than single-pass encoding at similar file sizes.

Configuration

GIF defaults

Architecture

src/
├── index.js       # MCP server — 6 tool definitions, stdio transport
├── recorder.js    # Playwright browser lifecycle + session management
└── converter.js   # ffmpeg two-pass GIF conversion

Key design decisions:

• Headed by default — You see what the browser is doing. Use --headless for background recording
• Lazy browser launch — Chromium only starts on first record_page call, keeping MCP server startup fast
• Session-based — Multiple recordings can run simultaneously, tracked by session ID
• One browser, multiple contexts — Each recording gets its own BrowserContext (lightweight, isolated)
• execFile not exec — No shell interpretation of filenames for safety

License

MIT