pagecast

Name: pagecast
Author: mcpware

by mcpware

Overview Schema Related Servers Score Discussions

JavaScript

Local

Pagecast

npm version npm downloads license GitHub stars GitHub forks

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

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:

Open a screen recorder, manually click through the demo
Open a video editor, zoom into the important parts
Export, figure out ffmpeg, optimize the file size
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.

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.

Related MCP server: video-capture-mcp

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.

# 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

How It Works

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:

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

Comparison

	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.

Configuration

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`

Architecture

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

Event timeline — every interaction records bounding box + timestamp
Cursor overlay — red dot + click ripple injected into the page
Tooltip overlay — magnified close-up in a clean tooltip frame with directional arrow
Cinematic zoom chains — nearby interactions form chains that zoom in, pan, zoom out
Thread-safe FFmpeg expressions — crop filters work correctly with multi-threaded encoding
Headed by default — watch what the AI does
execFile not exec — safe against shell injection

More from @mcpware

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`

License

MIT

Available Tools

9 tools

cinematic_exportA

Convert a recorded .webm to GIF or MP4 with cinematic crop-pan effects.

Crops the entire frame to focus on the interaction area, then pans smoothly between targets. Think of it as a virtual cameraman that follows the action.

Two rendering modes:

"quick" (default): FFmpeg-based crop with smoothstep easing. Fast, no extra dependencies.
"cinematic": Remotion-based rendering with spring animations. Requires remotion + react installed.

Example workflow:

record_page → interact_page (clicks, typing, etc.) → stop_recording
cinematic_export with the webmPath and timelinePath from stop_recording
Get a polished GIF/MP4 where the camera follows the action

ParametersJSON Schema

Name	Required	Description	Default
`fps`	No	Frame rate (default: 12 for GIF, 30 for cinematic MP4)
`mode`	No	Rendering mode: "quick" (FFmpeg) or "cinematic" (Remotion)	quick
`width`	No	Output width for GIF (height auto-scaled)
`format`	No	Output format (default: gif)	gif
`webmPath`	Yes	Path to the .webm file from stop_recording
`zoomLevel`	No	Zoom multiplier (default 2.5 = 2.5x zoom into interaction area)
`timelinePath`	Yes	Path to the -timeline.json file from stop_recording
`holdPerTarget`	No	How long to hold zoom on each interaction (seconds)
`transitionDuration`	No	Zoom ease-in/out duration in seconds

TDQS

A4/5.0

Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Given no annotations, the description explains behavior: crop-pan, two modes, dependencies for cinematic mode (Remotion+react). However, it omits details like whether it modifies files, permissions needed, or rate limits. Adequate but not thorough.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with paragraphs, an example workflow, and clear sections. It is not overly verbose but could be tightened slightly. Each sentence adds value.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The description covers the tool's purpose, parameters, and workflow, but lacks info on output location or return value. With no output schema, it would benefit from specifying what the tool returns or saves. Adequate for moderate complexity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% with all parameters described. The description adds value by noting default fps depends on format (12 for GIF, 30 for MP4) and clarifies zoom targets interaction area. This enriches understanding beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool converts .webm to GIF/MP4 with cinematic crop-pan effects, using the phrase 'Convert a recorded .webm to GIF or MP4 with cinematic crop-pan effects.' It distinguishes from sibling tools like convert_to_gif and convert_to_mp4 by highlighting the virtual cameraman effect.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides a concrete example workflow (record_page, interact_page, stop_recording) and describes two rendering modes, but does not explicitly compare to sibling tools like convert_to_gif or smart_export. Guidance is clear but could be more comprehensive.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

convert_to_gifB

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

ParametersJSON Schema

Name	Required	Description
`fps`	No	GIF frame rate (default 10)
`width`	No	GIF width in pixels (default 640, height auto-scaled)
`webmPath`	Yes	Path to the .webm file
`startTime`	No	Skip first N seconds (useful to trim blank loading frames)

TDQS

B3.1/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations; description lacks info on side effects, permissions, duration, or error handling. Only mentions method but no behavioral traits.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single sentence, front-loaded with key action. Efficient but omits needed detail.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

No output schema, no annotations. Description is too short for a 4-param tool; lacks return info, prerequisites, and error scenarios.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema covers 100% with descriptions. Tool description adds no extra param info beyond schema. Baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states the tool converts .webm video to optimized GIF, with specific method (ffmpeg two-pass palette). Distinct from sibling like convert_to_mp4.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use vs alternatives. Does not mention when conversion is appropriate or when to prefer other tools.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

convert_to_mp4A

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

ParametersJSON Schema

Name	Required	Description	Default
`crf`	No	Quality (18=high, 23=default, 28=small file)
`webmPath`	Yes	Path to the .webm file

TDQS

A3.5/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description must disclose behavior. It only says 'convert' without indicating whether the original file is preserved, output location, or processing side effects.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, well-structured sentence that quickly conveys purpose and context without unnecessary wording.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

While the description covers the basic conversion purpose and parameter quality, it omits important details like output path behavior and whether the original file is modified, which are relevant for a tool with no output schema.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% and the parameter descriptions in the schema are already detailed. The tool description adds no additional meaning beyond repeating the quality range, so the baseline score is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the conversion from .webm to MP4 (H.264) and highlights compatibility for social media and sharing, distinguishing it from siblings like convert_to_gif.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage for compatibility (social media, sharing) but does not explicitly state when not to use it or mention alternatives like convert_to_gif for other formats.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

interact_pageA

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

ParametersJSON Schema

Name	Required	Description	Default
`actions`	Yes	Array of actions to perform sequentially
`sessionId`	Yes	Session ID from record_page

TDQS

A3.6/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description must bear full burden. It mentions actions are performed sequentially and recorded, but lacks disclosure of behavioral traits like mutability, permissions, or side effects. It does not contradict annotations (none exist).

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

One sentence, front-loaded with action types, no wasted words. Efficient and clear.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (2 params, nested actions) and no output schema, the description covers essentials. Could mention that actions apply to the current page state or that sessionId must be from record_page, but overall adequate.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the schema documents parameters. The description adds a concise overview of action types but no new meaning beyond what the schema provides. Baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: performing actions on a recording page, listing specific action types (scroll, click, etc.). It distinguishes well from sibling tools, which are all about recording, exporting, or listing recordings.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage after recording (sessionId from record_page) but does not explicitly state when to use this tool vs alternatives or exclude cases. No guidance on prerequisites or when not to use it.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_recordingsA

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

ParametersJSON Schema

Name	Required	Description	Default
`directory`	No	Directory to list (default: ./recordings)

TDQS

A3.5/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, and the description only states what the tool does without disclosing behaviors like behavior on missing directory, permissions, or side effects.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single concise sentence with no wasted words, front-loading the key action and scope.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple list tool with one optional parameter and no output schema, the description is minimally adequate but lacks details about the return format or edge cases.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema already describes the parameter with 100% coverage, and the tool description adds no additional meaning or context beyond that.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description explicitly states the verb 'List', the resource 'recordings', and the specific file types '.webm and .gif', clearly distinguishing it from sibling tools that record or export.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage for listing existing recordings but provides no explicit guidance on when to use this tool versus siblings or when not to use it.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

record_and_exportA

All-in-one: open URL, wait for specified duration, stop recording, auto-export to the right format.

Use the "platform" parameter and we handle everything:

"Record a demo for my GitHub README" → platform: "github" → 1280×720 GIF
"Record my app for Instagram Reels" → platform: "reels" → 1080×1920 MP4
"Make a TikTok demo" → platform: "tiktok" → 1080×1920 MP4
"Record for YouTube" → platform: "youtube" → 1280×720 MP4

Or pass custom width/height/outputFormat for full control.

ParametersJSON Schema

Name	Required	Description
`url`	Yes	URL to record
`width`	No	Viewport width (auto-set if platform specified)
`gifFps`	No	GIF frame rate (only for GIF output)
`height`	No	Viewport height (auto-set if platform specified)
`gifWidth`	No	GIF width (only for GIF output, height auto-scaled)
`platform`	No	Target platform: github, readme, youtube, reels, instagram, tiktok, shorts, linkedin, twitter — auto-sets size + format
`outputFormat`	No	Output format (auto-set if platform specified)
`durationSeconds`	No	How long to record (default 5 seconds)

TDQS

A4.4/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It explains the core flow (open, wait, stop, export) and auto-configuration based on platform. Missing details include whether recording starts immediately after opening the URL and what 'wait' entails precisely.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is very concise: a two-sentence summary followed by bullet examples. Every sentence is essential, front-loaded, and easy to scan.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity (8 parameters, platform presets, auto-configuration), the description covers the workflow and parameter relationships well. It lacks details about return values or side effects (no output schema), but still delivers a solid understanding.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, baseline 3. The description adds value by explaining how platform values map to dimensions and format, and clarifies that gifFps/gifWidth apply only to GIF output, going beyond the schema descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool as an all-in-one solution that opens a URL, waits, stops recording, and auto-exports. It provides specific platform examples (GitHub, Reels, TikTok, YouTube) and contrasts with sibling tools like record_page and smart_export.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly guides when to use the tool (for combined recording and export with platform presets) and offers an alternative path via custom parameters. However, it does not explicitly name sibling tools for scenarios like separate record/export steps.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

record_pageA

Open a URL in a browser and start recording video. Returns a session ID. Call stop_recording when done.

Instead of specifying width/height, you can use the "platform" parameter:

"Record my app for GitHub README" → platform: "github" (1280×720, GIF)
"Record my app for Instagram Reels" → platform: "reels" (1080×1920, MP4)
"Record my app for TikTok" → platform: "tiktok" (1080×1920, MP4)
"Record my app for YouTube" → platform: "youtube" (1280×720, MP4)
"Record my app for YouTube Shorts" → platform: "shorts" (1080×1920, MP4)
"Record my app for Instagram post" → platform: "instagram" (1080×1080, MP4)
"Record my app for LinkedIn" → platform: "linkedin" (1080×1080, MP4)
"Record my app for Twitter" → platform: "twitter" (1280×720, MP4)

Or pass custom width/height for any other size.

ParametersJSON Schema

Name	Required	Description
`url`	Yes	URL to open and record
`width`	No	Viewport width in pixels (auto-set if platform is specified)
`height`	No	Viewport height in pixels (auto-set if platform is specified)
`platform`	No	Target platform: github, readme, youtube, reels, instagram, tiktok, shorts, linkedin, twitter

TDQS

A4.5/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, but the description honestly conveys that it starts recording and returns a session ID, and reminds to call stop_recording. Does not cover authentication or resource consumption, but adequate for a recording tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise, well-structured with a list of platform options, and front-loaded with the main action. Every sentence adds value without unnecessary verbosity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no output schema, it explains the return value (session ID) and includes usage guidance. It could contrast with siblings like record_and_export, but overall provides sufficient context for an agent.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters5/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, and the description adds significant value by explaining the platform parameter with concrete examples and size mappings. It also clarifies that width/height are auto-set when platform is specified, and custom sizes are possible.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states 'Open a URL in a browser and start recording video. Returns a session ID.' It distinguishes from siblings like interact_page and stop_recording by specifying the action of starting a recording.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It instructs to 'Call stop_recording when done' and provides examples for platform usage. It does not explicitly mention when not to use or alternatives, but the context is clear.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

smart_exportA

Convert a recorded .webm to GIF or MP4 with tooltip overlays on interactions.

The full viewport stays visible. When an interaction happens (click, type, hover), a clean tooltip inset appears showing a magnified close-up of that area with a small arrow pointing toward the interaction. Modern, minimal design (Linear/Figma style).

The tooltip positions itself on the opposite side of the screen from the interaction.

Perfect for product demos where viewers need to see both the full UI context AND the detail.

Example workflow:

record_page → interact_page (clicks, typing, etc.) → stop_recording
smart_export with the webmPath and timelinePath from stop_recording
Get a polished GIF/MP4 with tooltip overlays on every interaction

Compare with cinematic_export which crops the entire frame to follow the action.

ParametersJSON Schema

Name	Required	Description	Default
`fps`	No	Frame rate for GIF output
`width`	No	Output width for GIF (height auto-scaled)
`format`	No	Output format (default: gif)	gif
`webmPath`	Yes	Path to the .webm file from stop_recording
`tooltipSize`	No	Size of the tooltip inset in pixels (default 380)
`magnifyScale`	No	How much to magnify inside the tooltip (default 1.6x)
`timelinePath`	Yes	Path to the -timeline.json file from stop_recording
`holdPerTarget`	No	How long to show each tooltip (seconds)

TDQS

A4.1/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description fully explains the tool's behavior: it adds tooltip overlays on interactions, positions them opposite the interaction, and produces a polished output. However, it does not mention side effects like file creation or deletion.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with a front-loaded overview, bullet points, and an example workflow. It is slightly verbose but each sentence adds value.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given 8 parameters and no output schema, the description provides sufficient detail about the tool's purpose and behavior. The example workflow and comparison with siblings enhance completeness.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so baseline is 3. The description adds context for tooltipSize, magnifyScale, and holdPerTarget, but does not significantly enhance the meaning beyond the schema descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool converts .webm to GIF/MP4 with tooltip overlays, distinguishing it from cinematic_export which crops the frame. The verb 'convert' and resource 'recorded .webm' are specific, and the comparative mention differentiates siblings.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides an example workflow and compares with cinematic_export, making it clear when to use this tool. It does not explicitly state when not to use, but the context is sufficient for an agent to decide.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

stop_recordingA

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

ParametersJSON Schema

Name	Required	Description	Default
`sessionId`	Yes	Session ID from record_page

TDQS

A3.7/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description bears full burden. It states 'stop and save' but does not disclose what happens on invalid sessionId, whether the action is reversible, or if there are side effects. Basic behavioral disclosure is insufficient.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single sentence that efficiently conveys the core action and output. No unnecessary words, perfect front-loading.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the simple tool (one parameter, no output schema), the description is mostly adequate. However, it lacks return value information (e.g., success/failure indication) which is needed since there is no output schema.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% with one required parameter. The description enhances the schema by linking 'sessionId' to its source ('from record_page'), adding practical context that helps the agent understand parameter provenance.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('stop a recording session') and specifies the output format ('save as .webm file'). It distinctly separates from sibling tools like 'record_page' which starts recordings and 'convert_to_mp4' which converts formats.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies the tool should be used after starting a recording (via 'sessionId from record_page') but offers no explicit guidance on when to use versus alternatives or when not to use it. No exclusions or context provided.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.9/5.0

Disambiguation5/5

Each tool has a clearly distinct purpose: recording, interacting, stopping, converting, listing, and combining steps. Even the two export tools (cinematic_export vs smart_export) are well-differentiated in their descriptions.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern with snake_case (e.g., record_page, interact_page, stop_recording, convert_to_gif, list_recordings). No mixing of conventions.

Tool Count5/5

With 9 tools, the server is well-scoped for its purpose of recording, interacting, exporting, and managing recordings. This is within the ideal range and each tool serves a clear function.

Completeness4/5

The tool surface covers the full recording-to-export workflow, including a combined tool. Minor gaps: no delete or file management tool, and no pause/resume for recording, but these are non-critical.

Maintenance

ActivityInactive

ResponsivenessSyncing

Resources

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

mcp
com.screenshotink
Screenshot, diff, audit and sitemap-capture any web page — 5 MCP tools for AI agents.
Browser Automation Web Scraping
2
ShotAPI MCP Server A
io.github.smallhandsome
Screenshot and HTML render MCP server for AI agents
Browser Automation Image & Video Processing
21
Remote Browser MCP Server from MCPBundles
com.mcpbundles
Automate cloud Chrome—navigate, click, type, screenshot, run code, record screen video
Browser Automation Code Execution
2
ToolPipe MCP Server
io.github.COSAI-Labs
238+ dev tools via MCP: JSON, QR, PDF, DNS, hash, UUID, code review, JWT, SSL, WHOIS, and more
Developer Tools Code Analysis App Automation
26

Related MCP Servers

Playwright MCP
Browser Automation Agent Orchestration
misanthropic-ai
F
license
B
quality
D
maintenance
Playwright wrapper for MCP that enables LLM-powered clients to control a browser for automation tasks.
Updated a year ago (2025-03-13 05:35 UTC)
10
1
video-capture-mcp
Multimedia Processing Image & Video Processing Testing & QA Tools
Corvus400
A
license
A
quality
C
maintenance
MCP server for screen recording on macOS, iOS Simulator, and Android, with key-frame extraction via ffmpeg, enabling AI agents to capture UI motion and transient visual states.
Updated 3 months ago (2026-06-05 22:04 UTC)
12
1
MIT
autodemo
Browser Automation CI/CD & DevOps Agent Orchestration
praveen-palanisamy
A
license
Not graded
quality
A
maintenance
MCP server that turns any running web app into demo videos, interactive walkthroughs, and marketing captures via one command. Enables AI agents to show their work with regenerated demos on every PR.
Updated 2 months ago (2026-07-06 01:48 UTC)
17
3
MIT
screenwright
Browser Automation Multimedia Processing
0xjesus
A
license
Not graded
quality
B
maintenance
Enables users to create subtitled tutorial videos by scripting browser interactions with Playwright, outputting MP4 with burned-in captions and SRT file.
Updated 2 months ago (2026-07-19 19:50 UTC)
10
3
MIT

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/mcpware/pagecast'

If you have feedback or need assistance with the MCP directory API, please join our Discord server

Pagecast

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

How It Works

MCP Tools

Comparison

Configuration

Architecture

More from @mcpware

License

Available Tools

Maintenance

Resources

Looking for Admin?

Related MCP Connectors

Related MCP Servers

Latest Blog Posts

MCP directory API