SA
SkillAvatars
Back to MCP Tools

@canvas-mcp/server

media MCP Server

Open-source MCP server that gives AI assistants a visual design canvas, rendering HTML/CSS scene graphs to PNG via headless Chromium.

byvicmaster
VerifiedInstall Ready
mediamedia
7 views0 stars0 forksv0.9.0MIT
View on GitHub

Why This Matters

Discovered via github-topic:model-context-protocol and last synced 4mo ago.

VerifiedInstall Ready
Source
github-topic:model-context-protocol
Stars
0
Last synced
4mo ago
Install
Instructions detected

Install

1. Install the package

npx @canvas-mcp/server

2. Add to claude_desktop_config.json

{
  "mcpServers": {
    "-canvas-mcp-server": {
      "command": "npx",
      "args": [
        "@canvas-mcp/server"
      ]
    }
  }
}

Config file location: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) / %APPDATA%\Claude\claude_desktop_config.json (Windows)

31
Tools
0
Resources
0
Prompts
Standard I/O
Transport

Available Tools (31)

width

number?

filePath

string?

canvasId2

string

Category

Weight

CANVAS_VIEWER_URL

Point the MCP server at an external viewer (skips starting an embedded one).

height

number?

spacing

20

CANVAS_VIEWER_PORT

Override the standalone viewer's port.

scale

number?

color

25

maxDepth

number?

outputPath

string

Param

Type

mode

`"fast"` \

includeArchived

bool?

name

string?

format

string

preset

string

consistency

20

projectId

string?

canvasId

string

typography

20

nodeId

string?

nodeIds

string[]?

content

string?

canvasId1

string

categories

string[]?

breakpoints

array?

structure

15

Command

What it does

Variable

Purpose

Works Well With - Skills

deAPI AI Media Suite (Community)

The cheapest AI media API on the market. Generate images (Flux), music (AceStep), speech with voice cloning, transcribe video/audio, OCR, video generation, background removal, upscale, style transfer, and prompt enhancement — all through one unified API. Free $5 credit on signup.

5 starsHas guide

Press Release Writer

Write professional press releases that get media attention and coverage

1 starsHas guide

Guides & Tutorials

deAPI AI Media Suite (Community): A Practical Guide to the Claude Skill for Low-Cost AI Media Workflows

Learn how to use the deAPI AI Media Suite (Community) Claude skill. Complete guide with installation instructions and examples.

Press Release Writer: A Claude Skill for Professional Media Announcements

Learn how to use the Press Release Writer Claude skill. Complete guide with installation instructions and examples.

Browse all MCP servers