canvas-mcp

vicmaster/canvas-mcp

★ 0 stars TypeScript 🌐 Browser/Web Updated 4d ago

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

View on GitHub →

Quick Install

Copy the config for your editor. Some servers may need additional setup — check the README.

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "canvas-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "vicmaster/canvas-mcp"
      ]
    }
  }
}

README Excerpt

An open-source MCP server that gives any AI assistant a visual design canvas. Uses HTML/CSS as the rendering engine — flexbox layout, text wrapping, and styling come for free. > Above: a dashboard mock composed entirely via `batch_design` — gradients, shadows, a six-bar chart, and a responsive stat row that stacks below 768px.

Tools (20)

CANVAS_VIEWER_PORTCANVAS_VIEWER_URLCardLoginbreakpointscanvasIdcanvasId1canvasId2canvas_createcategoriescolorconsistencycontentfilePathformatheightincludeArchivedmaxDepthmodenodeId

Topics

aicanvasclaudedesign-toolshtml-cssmcpmcp-servermodel-context-protocolpuppeteertypescript

canvas-mcp

Quick Install

README Excerpt

Tools (20)

Topics

Related Browser/Web Servers