Clipacanvas

io.github.mechreaper007x由 GitHub 帳號 mechreaper007x 發布v1.0.2更新於 Oct 24, 2026

Render HTML, CSS, SVG, and Canvas animations to MP4 locally via Playwright/Chromium and FFmpeg.

已驗證STDIO僅桌面開發者工具媒體與設計

概覽

AI 產生的概覽

本機 MCP 伺服器,透過 Playwright Chromium 與 FFmpeg 在使用者電腦上把 HTML、CSS、SVG 與 Canvas 動畫算圖成 MP4 影片。

可以做什麼
  • 把 HTML/CSS/JS 動畫算圖成 MP4,並以 base64 形式回傳影片資料
  • 把相同內容直接算圖並存到指定的檔案路徑
  • 依需求設定輸出尺寸、位元率、影格率與最長算圖時間
  • 透過選用環境變數調整預設值與工具路徑
適用情境
適合想讓助理把產生的 HTML、CSS、SVG 或 Canvas 動畫程式碼轉成短 MP4 片段、且不願上傳到雲端服務的情境,例如直式短影音或快速動態圖像製作。
執行需求
以本機 stdio 程序執行,從 PyPI 安裝 clipacanvas-mcp,通常以 uvx 或 pip 啟動。需要 Python 3.10+、FFmpeg(系統安裝、透過 imageio-ffmpeg 提供,或設定 CLIPACANVAS_FFMPEG_EXE)以及 Playwright Chromium(首次算圖時自動安裝)。選用變數包括 CLIPACANVAS_BROWSERS_PATH、CLIPACANVAS_MAX_DURATION、CLIPACANVAS_DEFAULT_WIDTH、CLIPACANVAS_DEFAULT_HEIGHT、CLIPACANVAS_DEFAULT_BITRATE 與 CLIPACANVAS_DEFAULT_FRAME_RATE。不需要驗證。
安裝前請注意
寫檔工具會覆寫目標路徑,請把 output_path 指向可被覆寫的位置。算圖會在本機 Chromium 中執行所傳入的 HTML/CSS/JS,只應算圖可信的程式碼。算圖長度受最長時間設定限制。README 聲稱不上傳任何資料、不使用第三方服務,但這只是供應商自己的說法。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Clipacanvas,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only,透過 STDIO。 STDIO 服務會啟動本機處理程序,因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

Clip.A.Canvas MCP Server

A universal MCP (Model Context Protocol) server that exposes Clip.A.Canvas HTML-to-video rendering as an MCP tool. Works with Claude Desktop, ChatGPT, Antigravity CLI (agy), Claude Code, and any STDIO/HTTPS-based MCP client.

Features

  • Universal MCP tool — render_video and render_video_to_file exposed via the MCP protocol
  • Works everywhere — Claude Desktop, ChatGPT, Antigravity CLI, Claude Code, and more
  • Local rendering — no upload, no cloud; Chromium + FFmpeg run on your machine
  • Base64 or file output — return video as base64 string or save directly to a path

Installation

Client Configuration

1. Antigravity CLI (agy)

Add the following to your mcp_config.json (typically at ~/.gemini/antigravity-cli/mcp_config.json):

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

Verify the server loads successfully by running agy inspect.

2. Claude Code
bash
claude mcp add -s user clipacanvas -- cmd /c uvx --from clipacanvas-mcp clipmcp
3. Codex CLI
bash
codex mcp add clipacanvas -- uvx --from clipacanvas-mcp clipmcp

[!NOTE] If codex mcp list displays Auth: Unsupported for Clip.A.Canvas, this is completely normal! This status simply means the server does not require external OAuth authentication to run (which is correct for local stdio MCP servers).

From PyPI

bash
pip install clipacanvas-mcp# oruv tool install clipacanvas-mcp  # gives 'clipacanvas-mcp' command

Configuration

Environment variables (all optional):

VariableDefaultDescription
CLIPACANVAS_FFMPEG_EXEauto-detectPath to FFmpeg executable
CLIPACANVAS_BROWSERS_PATHauto-detectPath to Playwright browsers
CLIPACANVAS_MAX_DURATION12Max render duration in seconds
CLIPACANVAS_DEFAULT_WIDTH540Default video width
CLIPACANVAS_DEFAULT_HEIGHT960Default video height
CLIPACANVAS_DEFAULT_BITRATE5MDefault FFmpeg bitrate
CLIPACANVAS_DEFAULT_FRAME_RATE60Default frame rate

MCP Tools

render_video

Read-only hint: No | Destructive hint: No

Render HTML/CSS/JS to MP4, returned as base64.

Arguments:

json
{  "code": "<!DOCTYPE html><html>...</html>",  "width": 540,  "height": 960,  "bitrate": "5M",  "frame_rate": 60,  "max_duration": 12}

Returns: Text content with video metadata and base64-encoded MP4 data.

render_video_to_file

Read-only hint: No | Destructive hint: Yes (overwrites file)

Same as above but saves the MP4 directly to output_path.

Arguments:

json
{  "code": "<!DOCTYPE html><html>...</html>",  "output_path": "/absolute/path/to/video.mp4",  "width": 540,  "height": 960}

Usage in AI Clients

Claude Desktop

Add to your claude_desktop_config.json:

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

ChatGPT (via Bridge)

To use this local tool with ChatGPT, you can use an MCP-to-HTTPS bridge (like mcp-proxy) or host it on a public URL. ChatGPT currently requires an HTTPS endpoint for official "App" integrations.

Other Clients (Codex, Qwen Coder, etc.)

Since this is a standard STDIO-based server, it works with any client that supports MCP. Use uvx clipacanvas-mcp or python -m clipacanvas_mcp.server as the launch command.

Privacy Policy

Clip.A.Canvas is a local-first application.

  • Data Collection: No user data, code snippets, or rendered videos are ever uploaded to any server.
  • Processing: All HTML/CSS/JS rendering happens inside a local Chromium instance on your machine.
  • Storage: Rendered MP4 files are saved only to the directory you specify.
  • Third-party Services: None.

Requirements

  • Python 3.10+
  • FFmpeg (installed system-wide, via imageio-ffmpeg, or set CLIPACANVAS_FFMPEG_EXE)
  • Playwright Chromium: installed automatically on first render if missing.

License

MIT

來源:mcp/README.md,提交 573b01e

工具

0
SourceWeft 尚未在沙箱中啟動過該軟體包,因此其工具未知。

版本歷史

1
  1. v1.0.2最新Sep 16, 2026

評分

已滿足適用檢查項的 50%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通25 分

    請保持端點能夠回應 MCP 握手;SourceWeft 每 30 天探測一次。

  • 已宣告認證方式10 分

    請在註冊中心條目中宣告憑證請求標頭,或保持端點能夠回應探測,以便判定其認證方式。

  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list,或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分