Placeholder Image Generator

# 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 ```bash 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 ```typescript { "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 ```json { "mcpServers": { "placeholder-generator": { "command": "node", "args": ["D:\\path\\to\\generate-placeholder\\build\\index.js"] } } } ``` ### macOS/Linux ```json { "mcpServers": { "placeholder-generator": { "command": "node", "args": ["/absolute/path/to/generate-placeholder/build/index.js"] } } } ``` ## Development ```bash # 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