How do I use Image Generator MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Image Generator MCP Server generate 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

Installation

Clone or download this repository
Install dependencies:

npm install

Build the server:

npm run build

Add 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 saved
label (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 test

Dependencies

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