Image Generator MCP Server
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Image Generator MCP Servergenerate a 1920x1080 blue banner image for my website header"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Image Generator MCP Server
A Model Context Protocol (MCP) server that generates test images with customizable width, height, and color. Saves images as PNG files to specified file paths.
Features
Generate test images with specified dimensions (1-4096 pixels)
Support for hex color format (e.g., #FF0000, #f00)
Automatic text overlay showing image dimensions
Optional custom label text displayed in the top-left corner
Smart contrast color selection for readable text
Saves images as PNG files to specified file paths
Automatically creates directories if they don't exist
Related MCP server: Placeholder Image Generator
Installation
Clone or download this repository
Install dependencies:
npm installBuild the server:
npm run buildAdd the server to your MCP configuration:
For VSCode:
{
"servers": {
"Image Placeholder Gen": {
"type": "stdio",
"command": "node",
"args": [
"~/mcp_servers/image-gen/build/index.js"
]
}
}
}For Claude Desktop:
{
"mcpServers": {
"image-gen": {
"command": "node",
"args": ["/path/to/image-gen/build/index.js"]
}
}
}Usage
The server provides one tool:
generate_test_image
Generate a test image with specified parameters.
Parameters:
width(number): Width of the image in pixels (1-4096)height(number): Height of the image in pixels (1-4096)color(string): Color of the image as hex code (e.g., #FF0000 or #f00)filepath(string): Full path where the PNG image should be savedlabel(string, optional): Custom text to display in the top-left corner of the image
Example:
{
"name": "generate_test_image",
"arguments": {
"width": 400,
"height": 300,
"color": "#3498db",
"filepath": "/tmp/test_image.png",
"label": "My Custom Label"
}
}Returns:
Text confirmation that the image was successfully generated and saved
Color Format
The tool supports hex color format:
Hex colors:
#FF0000,#f00
Testing
Run the test script to verify the server works:
npm run build
npm testDependencies
Node.js canvas library for image generation
Model Context Protocol SDK
Notes
Maximum image dimensions are capped at 4096x4096 pixels for performance
Generated images include dimension text overlay for easy identification
Text color is automatically chosen for optimal contrast against the background
The server automatically creates directories if they don't exist in the specified file path
Contributing
Feel free to submit issues and enhancement requests!
This server cannot be deployed
Maintenance
Related MCP Connectors
Generate deterministic placeholder image URLs and packs for docs, staging, testing, and AI agents.
Generate PWA icon sets and iOS splash screens from a text prompt or an existing image.
Image toolkit: resize, compress, crop, watermark, convert, rotate, EXIF read/strip.
Resize, compress, convert, watermark and SEO-tag e-commerce product images from a public URL.
Related MCP Servers
- AlicenseAqualityFmaintenanceThis server generates placeholder image URLs from various providers, supporting input validation and integration with desktop applications like Claude and Cursor.112MIT
- FlicenseNot gradedqualityDmaintenanceGenerates customizable placeholder images with configurable dimensions, colors, and text using HTML5 Canvas. Supports multiple formats (PNG/JPEG) with automatic text scaling and contrast detection.-
- AlicenseNot gradedqualityDmaintenanceEnables AI image generation from text prompts using Pollinations AI. Supports multiple models, customizable dimensions, and direct image saving with URL generation capabilities.50 npm4MIT
- AlicenseAqualityDmaintenanceGenerates QR code PNG images from text or URLs with customizable options like size, color, and error correction level.1MIT