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

Related MCP server: Canvas MCP Server

Installation

npm install
npm run build

Usage

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

Tool: generate-placeholder-image

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

Example

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

Configuration for Claude for Desktop

Add the following to your Claude for Desktop configuration:

Windows

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

macOS/Linux

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

Development

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev

Technical Details

• Built with TypeScript and the MCP SDK

• Uses the canvas library for server-side image generation

• Implements stdio transport for MCP communication

• Automatic text scaling based on image dimensions

• Multi-line text support with word wrapping

Supported Color Formats

• 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

License

ISC