sam2332/mcp-server-generate-placeholder

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

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