Skip to main content
Glama
Sign In
pixel-mcp

pixel-mcp

by adrianoamaral
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

pixel-mcp

An MCP (Model Context Protocol) server that lets AI coding agents (Claude Code, Cursor, Windsurf, etc.) create pixel art programmatically. No daemon, no sockets, no Go runtime — just a lightweight TypeScript server that runs via npx.

Install

Use with Claude Code

Run this from your project directory:

claude mcp add pixel-art npx -- pxcli-mcp --export-dir ./assets/sprites

This registers the server in Claude Code's config scoped to your project. Verify it's connected with /mcp.

Use with any MCP client

npx pxcli-mcp --export-dir ./output

From source

npm install
npm run build
node dist/index.js --export-dir ./output

Related MCP server: Aseprite MCP

Quick start

Once configured, Claude (or any MCP client) can use these tools directly:

create_canvas(name: "hero", width: 16, height: 16)
fill_rect(canvas: "hero", x: 0, y: 0, width: 16, height: 16, color: "black")
set_pixel(canvas: "hero", x: 8, y: 4, color: "#ff0000")
draw_line(canvas: "hero", x1: 0, y1: 15, x2: 15, y2: 15, color: "white")
export_png(canvas: "hero", filename: "hero.png")

Tools

Tool

Description

create_canvas

Create a named canvas with given dimensions (max 256x256)

list_canvases

List all active canvases and their sizes

set_pixel

Set a single pixel color

get_pixel

Read a pixel's color

fill_rect

Fill a rectangle with a solid color

draw_line

Draw a line between two points (Bresenham's algorithm)

clear

Clear entire canvas to a color (default: transparent)

export_png

Export canvas to a PNG file

undo

Undo the last drawing operation

redo

Redo the last undone operation

All drawing tools accept a canvas parameter (defaults to "default"), so you can work on multiple sprites simultaneously.

Color formats

  • Hex: #rgb, #rrggbb, #rrggbbaa

  • Named: red, green, blue, white, black, transparent, yellow, cyan, magenta, orange, purple, gray, grey, pink, brown, lime, navy, teal, maroon, olive

CLI options

Flag

Description

--export-dir <path>

Directory for exported PNGs (defaults to CWD)

Playground (live preview)

The repo includes viewer.html — a browser-based playground for watching pixel art being drawn in real time.

  1. Serve the file locally:

    npx serve .

  2. Open http://localhost:3000/viewer.html in your browser

The playground has two columns:

  • Left: Scaled pixel canvas with coordinate tracker on hover

  • Right: Prompt field, canvas settings (name, dimensions, scale, background, export dir), action buttons, and a live operation log

The canvas exposes global drawing functions (px, rect, line) that can be called from the browser console or via browser automation tools (e.g. Claude in Chrome). This makes it easy to visually verify pixel art as it's being drawn step by step.

Drawing from the browser console

// Set a red pixel at (10, 5)
px(10, 5, 255, 0, 0, 255)

// Fill a blue rectangle
rect(0, 0, 16, 16, 0, 0, 255, 255)

// Draw a green line
line(0, 0, 15, 15, 0, 255, 0, 255)

// Update status message
setStatus('Drawing complete!')

Development

npm install
npm run build
npm test        # runs 22 tests (unit + MCP integration)
npm run dev     # watch mode for TypeScript compilation

Credits

Inspired by and built on top of vossenwout/pixel-art-cli — thank you for the original Go daemon-based pixel art CLI that made this possible.

Available Tools

10 tools
clearB

Clear the entire canvas to a color (default: transparent).

Inputs: color, canvas.

create_canvasA

Create a new named canvas with given dimensions. If a canvas with this name exists, it is replaced.

Inputs: width (required), height (required), name.

draw_lineA

Draw a line between two points using Bresenham's algorithm.

Inputs: x1 (required), x2 (required), y1 (required), y2 (required), +2 more.

export_pngB

Export a canvas to a PNG file.

Inputs: filename (required), canvas.

fill_rectB

Fill a rectangle with a solid color.

Inputs: x (required), y (required), color (required), width (required), +2 more.

get_pixelB

Get the color of a single pixel.

Inputs: x (required), y (required), canvas.

list_canvasesA

List all active canvases with their dimensions.

Inputs: no named parameters.

redoA

Redo the last undone operation on a canvas.

Inputs: canvas.

set_pixelB

Set a single pixel on the canvas.

Inputs: x (required), y (required), color (required), canvas.

undoC

Undo the last drawing operation on a canvas.

Inputs: canvas.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

    TDQS

    A3.6/5.0

    Scored across 10 tools

    Disambiguation5/5

    Each tool targets a distinct canvas operation: creation, listing, pixel access, shape drawing, clearing, export, and history control. There is no meaningful overlap or ambiguity between tool purposes.

    Naming Consistency4/5

    Most tools follow a clear verb_noun pattern like create_canvas, set_pixel, and export_png. A few names like clear, undo, and redo omit an object, but they are still conventional and readable.

    Tool Count5/5

    Ten tools is a well-scoped size for a pixel-art canvas server. Each tool covers a necessary part of the drawing workflow without unnecessary bloat or missing essentials.

    Completeness4/5

    The core canvas lifecycle is covered: create, list, draw, manipulate pixels, export, and undo/redo. A notable minor gap is the lack of an explicit delete_canvas operation, especially since canvases are described as 'active'.

    Resources

    Related MCP Connectors

    Related MCP Servers