Drawing

Provides a canvas drawing service for MCP-enabled AI assistants with create, draw, export, and data retrieval capabilities.

javascript

11

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "flrngel-mcp-painter": {
      "command": "npx",
      "args": [
        "-y",
        "github:flrngel/mcp-painter"
      ]
    }
  }
}

Drawing MCP Server is a canvas drawing service for MCP-enabled AI assistants. It lets you create canvases, draw colored rectangles, export the result as PNG, and retrieve the raw canvas data as JSON for further processing or rendering in your applications.

How to use

You connect your MCP client to the Drawing MCP Server to perform drawing operations. Use a canvas-driven workflow to create a canvas, draw filled rectangles with chosen colors, and export the final image when your task completes. You can also fetch the canvas data as JSON for programmatic analysis or reuse in other components.

How to install

Prerequisites you need before installing this MCP server are Node.js and npm (Node Package Manager). Install Node.js from the official website if you don’t have it yet.

Option A: Install via Smithery (automatic) — run this command to install mcp-painter for Claude Desktop automatically.

npx -y @smithery/cli install @flrngel/mcp-painter --client claude

Manual installation

Add this MCP config block to enable the painter server locally.

"painter": {
      "command": "npx",
      "args": ["-y", "github:flrngel/mcp-painter"]
    }

Available tools

createCanvas

Create a new canvas with specified dimensions to serve as the workspace for drawing.

drawRect

Draw a filled rectangle on the current canvas with a specified color and position.

exportPNG

Export the current canvas as a PNG image for storage or sharing.

getCanvasJSON

Retrieve the raw canvas data as JSON for programmatic processing or replication.