The Clip.A.Canvas server converts HTML/CSS/JS animations into MP4 videos using a headless Chromium browser and FFmpeg. It supports CSS animations, Web Animations API (WAAPI), SVG animations, and canvas-based animations.
Tools:
render_video: Takes a complete HTML document (with inline CSS/JS) and returns the rendered animation as a base64-encoded MP4.
render_video_to_file: Same as above, but saves the MP4 directly to a specified file path on disk — useful for large videos or pipeline integrations.
Customizable output settings:
Resolution: Width and height in pixels (default: 540×960)
Bitrate: FFmpeg encoding bitrate (default: 5M)
Frame rate: Frames per second (default: 60 fps)
Duration: Minimum (default: 0.35s) and maximum (default: 12s) render durations
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
Expose render_video and render_video_to_file tools to your AI assistant.
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"
}
}
}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-mcpClaude Desktop Configuration for Local Server:
{
"mcpServers": {
"clipacanvas": {
"command": "uvx",
"args": ["--from", "clipacanvas-mcp", "clipmcp"]
}
}
}Related MCP server: TimeVerse HyperFrames MCP
A keyboard-first CLI tool for local render pipelines.
# Using pipx (recommended)
pipx install clipacanvas-tui
# Using uv
uv tool install clipacanvas-tuiRun either command (clipacanvas-tui or clippp):
clipacanvas-tui --clipboard --preview
# or
clippp --clipboard --previewA visual UI for editing, previewing, and rendering HTML code to MP4.
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 chromiumWindows: Run launch_desktop.bat or python desktop_app.py
macOS: Run ./launch_desktop.command
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
MIT
Render HTML, CSS, and JavaScript code to an MP4 video using Chromium (headless) and FFmpeg. Supports CSS animations, WAAPI, SVG, and canvas animations. Returns the video as base64-encoded MP4.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | Complete HTML document including DOCTYPE, <html>, <head>, <body>, and any inline CSS/JS. | |
| width | No | Video width in pixels (default: 540). | |
| height | No | Video height in pixels (default: 960). | |
| bitrate | No | FFmpeg bitrate (default: '5M'). Examples: '2M', '10M'. | 5M |
| frame_rate | No | Frame rate for capture and encoding (default: 60). | |
| max_duration | No | Maximum render duration in seconds (default: 12). | |
| min_duration | No | Minimum render duration in seconds (default: 0.35). |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations (readOnlyHint=false, destructiveHint=false, openWorldHint=true) are consistent with description. Description adds details about external processes (Chromium, FFmpeg) and output format, providing behavioral context beyond annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three concise sentences cover purpose, supported features, and output format without redundancy. Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description explains purpose, supported features, output format, and uses external tools. It lacks details on parameter interactions (e.g., min/max_duration) but schema covers defaults. No output schema, but description sufficiently conveys return value. Overall adequate for complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with descriptions for all 7 parameters. Description adds only minor extra guidance on the 'code' parameter format, so it provides limited added value beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states the tool renders HTML/CSS/JS to an MP4 video using Chromium and FFmpeg, and specifies supported animations. It distinguishes from sibling 'render_video_to_file' by mentioning the base64-encoded output.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Description implies usage context (base64 output) but does not explicitly compare with sibling or state when to use this tool over alternatives. No when-not-to-use guidance is provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Same as render_video but saves the resulting MP4 directly to a file path on disk instead of returning base64. Useful for integrating with other tools or when dealing with large videos.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | Complete HTML document. | |
| output_path | Yes | Absolute path where the MP4 file should be saved. | |
| width | No | Video width in pixels (default: 540). | |
| height | No | Video height in pixels (default: 960). | |
| bitrate | No | FFmpeg bitrate (default: '5M'). | 5M |
| frame_rate | No | Frame rate (default: 60). | |
| max_duration | No | Maximum render duration in seconds (default: 12). |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already indicate destructiveHint=true, so the agent knows this tool writes files. The description adds that it saves MP4 to a file path, but does not disclose additional traits like overwrite behavior or disk space requirements. No contradiction with annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences, efficiently front-loading the core difference from the sibling tool. Every word adds value, with no redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with 7 parameters and no output schema, the description is sufficient: it explains the key behavior, use cases, and difference from sibling. It lacks details on error conditions or performance, but the annotations and schema cover most essential aspects.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Input schema has 100% description coverage, so parameters are well-documented. The description mentions output_path but adds no new meaning beyond the schema. Baseline of 3 is appropriate per scoring guidelines.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states that this tool renders video to a file on disk, contrasting it with render_video which returns base64. The verb 'render' and resource 'video to file' are specific, and the sibling distinction is explicitly made.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides context for when to use this tool: 'Useful for integrating with other tools or when dealing with large videos.' It implies when not to use (e.g., when base64 is needed) but does not explicitly state exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0render_videorender_video_to_fileScored across 2 tools
The tools are clearly differentiated by their output method (base64 vs file), and descriptions state the difference explicitly. However, the core functionality is identical, which could cause confusion if an agent doesn't read carefully.
Both tools follow a consistent pattern: 'render_video' base name with a suffix '_to_file' for the file variant. The naming is clear and predictable.
With only two tools, the server feels thin for a video rendering service. While it covers the basic render operation, additional tools for preview or status would make it more robust.
The server only offers rendering with two output formats. There are no tools for checking render status, managing rendered files, or handling different video settings, which are notable gaps.
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
FFmpeg as a service for AI agents: typed video editing tools, async jobs, downloadable outputs.
Render HTML, Markdown, or URLs to images, PDF, or branded artifacts; extract and watch pages.
Create and manage cinematic AI video renders through the Future Video Studio Agent API.
