Painter (Canvas Drawing) MCP server

This MCP server provides drawing capabilities for AI assistants, enabling them to create and manipulate visual content through a simple canvas interface. You can use it to create drawings programmatically with features like creating canvases, drawing shapes, and exporting images.

Installation Options

Via Smithery

The easiest way to install the drawing MCP server is through Smithery:

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

This command automatically sets up the MCP server for Claude Desktop.

Manual Installation

To install the drawing MCP server manually, add the following configuration to your MCP config:

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

Using the Drawing MCP Server

Creating a Canvas

First, create a new canvas by specifying its dimensions:

// Create a 500x300 canvas
const canvas = await mcp.painter.createCanvas({
  width: 500,
  height: 300
});

Drawing Shapes

Once you have a canvas, you can draw shapes on it:

// Draw a filled blue rectangle
await mcp.painter.fillRect({
  x: 50,      // x-coordinate of top-left corner
  y: 75,      // y-coordinate of top-left corner
  width: 200, // width of rectangle
  height: 100, // height of rectangle
  color: "#0000FF" // blue color in hex format
});

Exporting Your Drawing

You can export your drawing as a PNG image:

// Export the canvas as a PNG image
const image = await mcp.painter.exportAsPNG();

Getting Raw Canvas Data

To retrieve the raw canvas data as JSON:

// Get the canvas data
const canvasData = await mcp.painter.getCanvasData();

Example Usage

Here's a complete example that creates a simple drawing:

// Create a new canvas
const canvas = await mcp.painter.createCanvas({
  width: 600,
  height: 400
});

// Draw a blue sky
await mcp.painter.fillRect({
  x: 0,
  y: 0,
  width: 600,
  height: 300,
  color: "#87CEEB"
});

// Draw green grass
await mcp.painter.fillRect({
  x: 0,
  y: 300,
  width: 600,
  height: 100,
  color: "#228B22"
});

// Draw a yellow sun
await mcp.painter.fillRect({
  x: 500,
  y: 50,
  width: 50,
  height: 50,
  color: "#FFD700"
});

// Export the image
const image = await mcp.painter.exportAsPNG();

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.