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
canvaslibrary 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