English Français العربية

io.github.mechreaper007x/clipacanvas

Official registry Search and web

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

Source code Documentation

Install

Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).

PYPI package clipacanvas-mcp
Claude Code 
claude mcp add clipacanvas -- uvx clipacanvas-mcp==1.0.2
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "clipacanvas": {
            "command": "uvx",
            "args": [
                "clipacanvas-mcp==1.0.2"
            ]
        }
    }
}

Documentation

From the project's README on GitHub, refreshed weekly. Links open on GitHub.

Contents
  1. Clip.A.Canvas
  2. 🎬 MCP Server (Model Context Protocol)
  3. 💻 Terminal UI (TUI)
  4. 🖥️ Desktop App
  5. 🏗️ Build Outputs & Packaged Releases
  6. 📄 License

Clip.A.Canvas

Clip.A.Canvas transforms HTML/CSS/JS animations into MP4 videos — entirely local or hosted in the cloud. Powered by Chromium + FFmpeg for high-quality, browser-accurate rendering. Perfect for AI agents generating video content, demos, or visual explanations on-the-fly.

Clip.A.Canvas is a local and remote browser-motion-to-video toolkit.

It includes:

  • Desktop App: Paste, preview, and export animations locally with a pywebview UI.
  • MCP Server: Exposes HTML-to-video rendering tools to Antigravity, Gemini, Codex, Claude Code, and other AI clients.
  • Terminal UI (TUI): Keyboard-first command-line client for code-first rendering.
  • Website: https://clipacanvas.vercel.app
  • GitHub: https://github.com/mechreaper007x/ClipACanvas
  • Releases: https://github.com/mechreaper007x/ClipACanvas/releases/tag/v1.0.0
  • Cloud MCP (SSE): https://mechreaper007x-clip-a-canvas-mcp.hf.space/sse

🎬 MCP Server (Model Context Protocol)

Expose render_video and render_video_to_file tools to your AI assistant.

1. Cloud-Hosted (Zero Resource Usage)

We host a public instance of the MCP server on Hugging Face Spaces using Server-Sent Events (SSE). Point your client configuration directly to our cloud endpoint:

Claude Desktop Configuration (claude_desktop_config.json):

{
  "mcpServers": {
    "clipacanvas": {
      "url": "https://mechreaper007x-clip-a-canvas-mcp.hf.space/sse"
    }
  }
}
2. Local Execution (Standard PyPI)

If you prefer running the server locally on your machine:

# Run locally with uvx
uvx --from clipacanvas-mcp clipmcp

# Or install via pip
pip install clipacanvas-mcp

Claude Desktop Configuration for Local Server:

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

💻 Terminal UI (TUI)

A keyboard-first CLI tool for local render pipelines.

Install from PyPI:
# Using pipx (recommended)
pipx install clipacanvas-tui

# Using uv
uv tool install clipacanvas-tui
Usage:

Run either command (clipacanvas-tui or clippp):

clipacanvas-tui --clipboard --preview
# or
clippp --clipboard --preview

🖥️ Desktop App

A visual UI for editing, previewing, and rendering HTML code to MP4.

Install Dependencies:
git clone https://github.com/mechreaper007x/ClipACanvas.git
cd ClipACanvas
pip install -r requirements.txt
pip install -r desktop_requirements.txt
npm install
python -m playwright install chromium
Run the App:
  • Windows: Run launch_desktop.bat or python desktop_app.py
  • macOS: Run ./launch_desktop.command

🏗️ Build Outputs & Packaged Releases

See build_desktop.py to package binaries:

  • Windows Portable EXE: python build_desktop.py -> dist/ClipACanvas.exe
  • Windows Installer: python build_installer.py -> dist/ClipACanvas-Setup.exe
  • macOS Bundle: python3 build_mac_app.py -> dist/ClipACanvas.app

📄 License

MIT

Frequently asked questions

What is io.github.mechreaper007x/clipacanvas?

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

How do I install io.github.mechreaper007x/clipacanvas?

It runs on your machine. In Claude Code: claude mcp add clipacanvas -- uvx clipacanvas-mcp==1.0.2. For other clients, paste the JSON configuration from this page into their MCP settings.

Does io.github.mechreaper007x/clipacanvas need an API key?

Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.

Is io.github.mechreaper007x/clipacanvas open source?

Yes. Its code is on GitHub under the MIT license.

Who maintains io.github.mechreaper007x/clipacanvas?

It is published by mechreaper007x. AI.tn lists it but does not maintain or endorse it.

From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.