mcpware/pagecast

mcpware/pagecast

от mcpware
Pagecast — MCP сервер для автосоздания демо-гифок и видео из действий AI в браузере. Добавляет лупу на клики и кинематографический зум, экспортирует чистый GIF/MP4. Полезен разработчикам для README и демо: просто опишите сценарий — сервер запишет и смонтирует сам.

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

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)

Часто задаваемые вопросы

Инструменты были проиндексированы:
convert_to_gif

Преобразует видео .webm в оптимизированный GIF с помощью двухпроходного метода палитры ffmpeg.

Параметры
  • fpsnumber

    Частота кадров GIF (по умолчанию 10)

  • startTimenumber

    Пропустить первые N секунд (полезно для обрезки пустых загрузочных кадров)

  • webmPathstringобязательный

    Путь к файлу .webm

  • widthnumber

    Ширина GIF в пикселях (по умолчанию 640, высота масштабируется автоматически)

convert_to_mp4

Преобразует видео .webm в MP4 (H.264). Широко совместим с социальными сетями, обменом и встраиванием.

Параметры
  • crfnumber

    Качество (18=высокое, 23=по умолчанию, 28=маленький файл)

  • webmPathstringобязательный

    Путь к файлу .webm

interact_page

Выполняет действия на странице записи (прокрутка, клик, наведение, ввод, нажатие, выбор, ожидание, навигация). Действия выполняются последовательно и записываются в видео.

Параметры
  • actionsobject[]обязательный

    Массив действий, которые выполняются последовательно

  • sessionIdstringобязательный

    Идентификатор сеанса из record_page

list_recordings

Перечисляет все записи .webm и .gif в выходном каталоге.

Параметры
  • directorystring

    Каталог для отображения (по умолчанию: ./recordings)

record_and_gif

Всё в одном: открывает URL, ждёт указанное время, останавливает запись, преобразует в GIF. Лучше всего подходит для простых демонстраций.

Параметры
  • durationSecondsnumber

    Сколько записывать (по умолчанию 5 секунд)

  • gifFpsnumber

    Частота кадров GIF

  • gifWidthnumber

    Ширина GIF (высота масштабируется автоматически)

  • heightnumber

    Высота вьюпорта.

  • urlstringобязательный

    URL для записи

  • widthnumber

    Ширина области просмотра

record_page

Откройте URL в браузере и запустите запись видео. Возвращает идентификатор сессии. Вызовите stop_recording по завершении. Обычные размеры: 1280x720 (16:9, README/YouTube), 1080x1920 (9:16, IG Reels/TikTok), 1080x1080 (1:1, Instagram/LinkedIn).

Параметры
  • heightnumber

    Высота области просмотра в пикселях.

  • urlstringобязательный

    URL для открытия и записи

  • widthnumber

    Ширина области просмотра в пикселях

stop_recording

Останавливает сессию записи и сохраняет видео в файл .webm.

Параметры
  • sessionIdstringобязательный

    Идентификатор сеанса из record_page

0.2.1основная
0.2.0
0.1.3
0.1.2
0.1.1
0.1.0

Выберите клиент, чтобы установить mcpware/pagecast:

Любой клиент

Конфиг добавления MCP сервера стандартный, обычно он не меняется вообще, поэтому подходит практически к любому ИИ клиенту, поддерживающему MCP.

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

Перейдите по ссылке и сервер автоматически будет добавлен в Cursor. Либо откройте/создайте файл ~/.cursor/mcp.json(%USERPROFILE%\.cursor\mcp.json на Windows) и добавьте конфиг сервера:

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

Создайте .vscode/mcp.json в проекте (ключ верхнего уровня — servers):

{
  "servers": {
    "mcpware-pagecast-qdc3x0xo5d": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@mcpware/pagecast"
      ]
    }
  }
}

Либо добавьте сервер через терминал:

code --add-mcp "{\"name\":\"mcpware-pagecast-qdc3x0xo5d\",\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"-y\",\"@mcpware/pagecast\"]}"
ClaudeClaude Desktop

Откройте Settings → Developer → Edit Config — это откроет файл claude_desktop_config.json:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

Впишите сервер и полностью перезапустите Claude Desktop:

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

Добавьте сервер одной командой в терминале:

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

Либо через JSON-конфиг:

claude mcp add-json mcpware-pagecast-qdc3x0xo5d "{\"command\":\"npx\",\"args\":[\"-y\",\"@mcpware/pagecast\"]}"
CodexCodex

Добавьте сервер командой в терминале:

codex mcp add mcpware-pagecast-qdc3x0xo5d -- npx -y @mcpware/pagecast

Либо вручную в ~/.codex/config.toml(%USERPROFILE%\.codex\config.toml на Windows):

[mcp_servers.mcpware-pagecast-qdc3x0xo5d]
command = "npx"
args = ["-y", "@mcpware/pagecast"]
PerplexityPerplexity

MCP доступен подписчикам Perplexity Pro / Max / Enterprise. Локальные серверы — только в приложении для macOS.

  1. Откройте Настройки аккаунта → Connectors.
  2. Установите вспомогательное приложение PerplexityXPC (один раз).
  3. Нажмите Add Connector → вкладка Simple.
  4. В поле Server Name укажите mcpware/pagecast, а в поле команды запуска — строку ниже:
npx -y @mcpware/pagecast

Нажмите Save и дождитесь статуса Running.

WindsurfWindsurf

Откройте Windsurf Settings → Cascade → MCP Servers или отредактируйте файл ~/.codeium/windsurf/mcp_config.json:

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

В панели Cline нажмите иконку MCP Servers → Configure → Configure MCP Servers (или отредактируйте ~/.cline/mcp.json) и добавьте сервер:

{
  "mcpServers": {
    "mcpware-pagecast-qdc3x0xo5d": {
      "command": "npx",
      "args": [
        "-y",
        "@mcpware/pagecast"
      ],
      "disabled": false,
      "autoApprove": []
    }
  }
}
Continue

Создайте файл в .continue/mcpServers/ (например mcpware-pagecast-qdc3x0xo5d.yaml) или добавьте блок в config.yaml. MCP работает только в режиме agent:

mcpServers:
  - name: mcpware-pagecast-qdc3x0xo5d
    command: npx
    args:
      - "-y"
      - "@mcpware/pagecast"
Zed

Выполните agent: add context server или откройте настройки (zed: open settings file) и добавьте сервер в объект context_servers:

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

Похожие MCP-сервера

Custodia-Admin/pagebolt-mcp

Custodia-Admin/pagebolt-mcp

от custodia-admin

PageBolt MCP сервер открывает AI-ассистентам браузерную веб-автоматизацию: скриншоты, PDF и запись демо-видео. Также инспектирует страницы и создаёт OG-картинки. Просто опишите задачу — сервер выполнит.

JavaScript⭐ 4
ndthanhdev/mcp-browser-kit

ndthanhdev/mcp-browser-kit

от ndthanhdev

MCP Browser Kit — сервер, который позволяет AI-ассистентам напрямую управлять локальными браузерами. Полезен для автоматизации действий на страницах, сбора данных и тестирования. Разработчики и тес...

TypeScript⭐ 55
mcpware/ui-annotator-mcp

mcpware/ui-annotator-mcp

от mcpware

MCP сервер, который через обратный прокси добавляет на любую веб-страницу визуальные подписи ко всем элементам. Наведите курсор – увидите имя, селектор и размеры. Теперь вы и AI говорите на одном я...

JavaScript⭐ 21
Browserbase MCP

Browserbase MCP

официальный

от browserbase

Запускает облачный браузер Browserbase: открывает любые сайты, кликает по элементам, заполняет формы и выгружает данные со страниц.

TypeScript⭐ 3399
Playwright MCP

Playwright MCP

официальный

от microsoft

Playwright управляет браузером: открывает страницы, кликает, заполняет формы. Работает по accessibility-дереву, без скриншотов.

TypeScript⭐ 38388
Browser MCP

Browser MCP

официальный

от browsermcp

Автоматизирует ваш браузер: кликает, заполняет формы, извлекает данные. Работает локально в вашем профиле, видит все логины и обходит капчи.

TypeScript⭐ 7201
© Каталог MCP, 2026. Все права защищены.
Проект не аффилирован с Anthropic и любыми упомянутыми продуктами.
Все названия и торговые марки принадлежат их владельцам.
Контакты для связи: hi@mcp-katalog.ru

Лука Никитин