Pagecast

Pagecast

English | 廣東話

将 AI 浏览器交互变成精致的产品演示。

让 AI 为你演示应用。Pagecast 会录制浏览器、追踪每次点击和按键操作，并导出可直接发布的 GIF 或 MP4，还带有工具提示缩放叠层和电影感平移效果。无需屏幕录制器，无需视频编辑器，无需后期制作。你也可以设置为每次 PR 后自动生成演示 GIF。

不使用 Pagecast — 普通屏幕录制需要你亲自演示并录制，而且每次更改 UI 后都要重新录制。虽然能看到光标移动，但实际交互太小，难以看清：

使用 Pagecast（工具提示模式）— 每次交互都会出现放大的特写，让观众清楚地看到发生了什么；它还会设计演示内容并自动生成新的演示 GIF：

使用 Pagecast（电影模式）— 摄像机裁切画面并平移跟随每个操作；它还会设计演示内容并自动生成新的演示 GIF：

两种 Pagecast 使用方式

1. 产品演示工具（主要用途）

你构建了一个 Web 应用，需要为 README 制作演示 GIF。通常你会：

1. 打开屏幕录制器，手动点击完成演示
2. 打开视频编辑器，将重要部分放大
3. 导出，研究 ffmpeg，并优化文件大小
4. UI 更改后 → 重做所有步骤

使用 Pagecast，你只需告诉 AI：

"Record a demo of localhost:3000 for my GitHub README"

AI 会打开真实浏览器、与你的应用交互，并为每次交互自动缩放，导出精致的 GIF。UI 有更改？只需重新运行。演示会自动重新生成。

2. 屏幕录制工具（同样适用）

不需要缩放效果？Pagecast 也可以作为普通屏幕录制器使用：

"Record my app for 10 seconds and export as MP4"

AI 会录制并生成 .webm，你可以得到经过优化的 .gif 或 .mp4。两遍 ffmpeg 调色板优化、适配平台的尺寸，一次工具调用即可完成。

导出模式

模式	工具	功能	适用场景
Tooltip	smart_export	显示完整视口，并在每次交互附近叠加放大的工具提示	README 演示、产品页面
Cinematic	cinematic_export	摄像机裁切画面并平移跟随每次交互	社交媒体、戏剧性展示
Plain	convert_to_gif / convert_to_mp4	标准屏幕录制，无缩放效果	Bug 报告、QA 录屏

告诉它要发布到哪里即可

你不必了解视口尺寸或格式，只需告诉 AI 目标平台：

"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

平台	尺寸	格式	宽高比
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
自定义	任意尺寸	自选	任意

快速开始

需要 Node.js ≥ 20 和 ffmpeg。

# 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

让演示看起来更专业的功能：

• 光标高亮 — 红点跟踪鼠标，方便观众跟上操作
• 点击波纹 — 为每次点击提供视觉反馈
• 工具提示叠层 — 每次交互附近都会出现放大的特写，并带有指向交互位置的小箭头
• 电影式平移 — 在交互目标之间平滑裁切切换，并使用 easeInOut 曲线

MCP 工具

工具	功能
record_page	打开 URL，开始录制。自动注入光标高亮和点击涟漪效果
interact_page	滚动、点击、悬停、输入、按键、选择、导航、waitForSelector——所有操作都会记录边界框
stop_recording	停止并保存 .webm 和 -timeline.json（包含交互位置的事件时间线）
smart_export	工具提示叠加层——每次交互时放大显示工具提示特写
cinematic_export	电影感裁剪平移——镜头会在交互目标之间跟随操作
convert_to_gif	WebM → 优化后的 GIF（ffmpeg 两遍调色板处理，可配置 FPS／宽度／剪辑范围）
convert_to_mp4	WebM → MP4（H.264，适合社交分享和嵌入）
record_and_export	一站式流程：录制 → 根据平台自动导出为 GIF 或 MP4
list_recordings	列出输出目录中的所有 .webm、.gif 和 .mp4 文件

对比

	自动化	交互操作	演示缩放	输出	AI 驱动	平台预设
Pagecast	✅	✅ 点击／输入／滚动／悬停	✅ 工具提示 + 电影感效果	GIF + WebM + MP4	✅	✅
Screen Studio	❌ 手动	❌	✅ 基于光标	MP4	❌	❌
AutoZoom	❌ 手动	❌	✅ 基于点击	MP4	❌	❌
Playwright MCP	✅	✅	❌	原始 .webm	部分支持	❌
gifcap.dev / Peek / Kap	❌ 手动	❌	❌	GIF	❌	❌
VHS (Charmbracelet)	✅ 脚本驱动	仅终端	❌	GIF	❌	❌

Screen Studio 和 AutoZoom 的缩放效果很好，但需要手动录制。 Pagecast 是唯一一款由 AI 录制且自动添加演示特效的工具。

配置

设置	默认值	备注
浏览器	有头模式（可见）	后台运行可使用 --headless
GIF FPS	12	数值越高越流畅，文件也越大
GIF 宽度	800px	高度自动缩放
工具提示放大倍数	1.6x	工具提示的放大程度
工具提示尺寸	380px	工具提示嵌入画面的尺寸
电影感缩放倍数	2.5x	镜头的放大程度
缩放过渡	0.35s	Smoothstep 缓入／缓出时长
光标叠加层	开启	红点 + 点击涟漪效果
视频视口	1280×720	或使用 platform 参数
输出目录	./recordings	覆盖设置：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

• 事件时间线——每次交互都会记录边界框和时间戳
• 光标叠加层——向页面注入红点和点击涟漪效果
• 工具提示叠加层——在简洁的工具提示框中放大显示特写，并带有方向箭头
• 电影感缩放链——相近的交互会形成链条，依次执行放大、平移和缩小
• 线程安全的 FFmpeg 表达式——裁剪滤镜可在多线程编码时正常工作
• 默认使用有头模式——可观察 AI 的操作
• 使用 execFile 而非 exec——防止 Shell 注入

更多来自 @mcpware 的项目

项目	功能	安装
Instagram MCP	23 个 Instagram Graph API 工具——帖子、评论、私信、快拍、分析	npx @mcpware/instagram-mcp
Claude Code Organizer	Claude Code 记忆、技能、MCP 服务和钩子的可视化仪表板	npx @mcpware/claude-code-organizer
UI Annotator	在任意网页上显示悬停标签——AI 可按名称引用元素	npx @mcpware/ui-annotator
LogoLoom	AI 标志设计 → SVG → 完整品牌套件导出	npx @mcpware/logoloom

许可证

MIT