clipacanvas

clipacanvas

mechreaper007xMIT
ClipACanvas — MCP-сервер для конвертации веб-анимаций в видео MP4. Он принимает код HTML, CSS, JavaScript, SVG или Canvas и рендерит его как полноценный видеоролик. Движок рендеринга — Chromium под управлением Playwright, кодирование выполняет FFmpeg. В отличие от средств захвата экрана, ClipACanvas генерирует видео напрямую из исходного кода. Это даёт точное совпадение с пиксельной разметкой и позволяет встраивать генерацию видео в пайплайны AI-агентов. Инструмент подходит разработчикам, которые хотят создавать видеодемонстрации, записывать интерфейсы или генерировать визуальные инструкции без загрузки данных на сторонние серверы.
DesignChromeBrowserPlaywrightGaming
Открыть на GitHub

Установка

uvx clipacanvas-mcp

Характеристики

Общее

  • СтатусСообщество
  • Разработчикmechreaper007x
  • ЛицензияMIT

Технологии

  • Языки
    Python
  • Транспорт
    stdio

Описание

Возможности

  • Конвертирует HTML, CSS, JavaScript, SVG и Canvas-анимации в MP4
  • Использует реальный браузерный рендеринг через Chromium и Playwright
  • Кодирует видео через FFmpeg с настраиваемым качеством и битрейтом
  • Экспортирует MCP-инструменты render_video и render_video_to_file
  • Работает как автономный MCP-сервер, десктопное приложение с предпросмотром или терминальный интерфейс (TUI)
  • Поддерживает облачный запуск через SSE-эндпоинт без установки зависимостей
  • Не требует платных подписок — всё выполняется локально или на вашем хостинге
  • Исходный код открыт под лицензией MIT

Как подключить

ClipACanvas можно использовать в облаке или запустить локально.

Облачная версия. Укажите в конфигурации Claude Desktop адрес публичного сервера на Hugging Face Spaces. Устанавливать ничего не нужно.

{ "mcpServers": { "clipacanvas": { "url": "https://mechreaper007x-clip-a-canvas-mcp.hf.space/sse" } } }

Локальная установка. Выполните команду в терминале:

uvx --from clipacanvas-mcp clipmcp

Или установите через pip:

pip install clipacanvas-mcp

Пропишите в claude_desktop_config.json:

{ "mcpServers": { "clipacanvas": { "command": "uvx", "args": ["--from", "clipacanvas-mcp", "clipmcp"] } } }

После настройки перезапустите клиент. Сервер готов к работе.

Примеры запросов

  • «Создай видео с плавной анимацией круга, который меняет цвет с синего на красный»
  • «Отобрази этот HTML-код с CSS-градиентами и запиши в MP4 с частотой 30 кадров в секунду»
  • «Сгенерируй видеодемонстрацию работы интерфейса из SVG-схемы»
  • «Запиши Canvas-анимацию частиц в формате MP4»

Технические детали

  • Язык разработки: Python
  • Транспорт: stdio, Server-Sent Events (SSE)
  • Лицензия: MIT
  • Основные зависимости: Playwright (Chromium), FFmpeg
  • Совместимые клиенты: Claude Desktop, Gemini, Codex, Claude Code и любые MCP-хосты

Поделиться