Placeholder Image Generator MCP Server

A Model Context Protocol (MCP) server that generates customizable placeholder images using HTML5 Canvas.

Features

Flexible Dimensions: Generate images from 1x1 to 4096x4096 pixels
Custom Colors: Support for hex, RGB, and named colors
Smart Text Rendering: Automatic font sizing and line wrapping
Contrast Detection: Automatically chooses contrasting text colors
Multiple Formats: Outputs PNG and JPEG images
Error Validation: Comprehensive input validation with helpful error messages

npm install npm run build

This is an MCP server designed to be used with MCP-compatible clients like Claude for Desktop.

Generate a placeholder image with the following parameters:

filename (string): Output filename with extension (.png, .jpg, .jpeg)
width (number): Image width in pixels (1-4096)
height (number): Image height in pixels (1-4096)
color (string): Background color (hex like #FF0000, rgb like rgb(255,0,0), or named colors like 'red')
text (string): Text to display on the image

{ "filename": "placeholder.png", "width": 800, "height": 600, "color": "#3498db", "text": "Sample Placeholder" }

Add the following to your Claude for Desktop configuration:

{ "mcpServers": { "placeholder-generator": { "command": "node", "args": ["D:\\path\\to\\generate-placeholder\\build\\index.js"] } } }

{ "mcpServers": { "placeholder-generator": { "command": "node", "args": ["/absolute/path/to/generate-placeholder/build/index.js"] } } }

# Install dependencies npm install # Build the project npm run build # Run in development mode npm run dev

Hex: #FF0000, #f00
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5)
Named: red, blue, green, yellow, orange, purple, pink, brown, black, white, gray