Pagecast

by mcpware

1.1k downloads Not rated yet

GitHub Website

Other

About

# Pagecast [![npm version](https://img.shields.io/npm/v/@mcpware/pagecast)](https://www.npmjs.com/package/@mcpware/pagecast) [![npm downloads](https://img.shields.io/npm/dt/@mcpware/pagecast?label=downloads)](https://www.npmjs.com/package/@mcpware/pagecast)…

Explore

- AI-driven browser recording and export
- Tooltip and cinematic zoom overlay modes
- Platform-aware presets (GitHub, YouTube, TikTok, etc.)
- Cursor highlight and click ripple effects
- Two-pass ffmpeg palette optimization for GIFs
- Headless mode for automated background recording

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Pagecast

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

From the repository

Node.js ≥ 20 and ffmpeg required.


npx playwright install chromium

`record_page`

Open a URL in a browser and start recording video. Returns a session ID. Call stop_recording when done. Common sizes: 1280x720 (16:9, README/YouTube), 1080x1920 (9:16, IG Reels/TikTok), 1080x1080 (1:1, Instagram/LinkedIn).

`interact_page`

Perform actions on a recording page (scroll, click, hover, type, press, select, wait, navigate). Actions are performed sequentially and recorded in the video.

`stop_recording`

Stop a recording session and save the video as .webm file.

`convert_to_gif`

Convert a .webm video to an optimized GIF using ffmpeg two-pass palette method.

`convert_to_mp4`

Convert a .webm video to MP4 (H.264). Widely compatible for social media, sharing, and embedding.

`record_and_gif`

All-in-one: open URL, wait for specified duration, stop recording, convert to GIF. Best for simple demos.

`list_recordings`

List all .webm and .gif recordings in the output directory.

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:

"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.

| 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 |

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "pagecast": {
            "pagecast": {
                "command": "npx",
                "args": [
                    "-y",
                    "@mcpware/pagecast"
                ]
            }
        }
    }
}

McpServers

{
    "pagecast": {
        "command": "npx",
        "args": [
            "-y",
            "@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:

Original

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:

Tooltip Demo

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:

Cinematic Demo

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:

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.

2. Screen recording tool (also works)

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.

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:

"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 |

Quick Start

Node.js ≥ 20 and ffmpeg required.

```bash

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Explore

Setting up with Highlight

From the repository

record_page

interact_page

stop_recording

convert_to_gif

convert_to_mp4

record_and_gif

list_recordings

Claude Desktop / Cursor

McpServers

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)

2. Screen recording tool (also works)

Export Modes

Just Say Where It's Going

Quick Start

More like this

Sequential Thinking

Filesystem

EverArt

Google Drive

`record_page`

`interact_page`

`stop_recording`

`convert_to_gif`

`convert_to_mp4`

`record_and_gif`

`list_recordings`