Image Generator MCP Server

Image Generator MCP Server

Generates customizable test/placeholder images as PNG files with specified dimensions (1-4096px), hex colors, and optional labels. Automatically creates directories and adds dimension overlays with smart contrast text.

Category
Visit Server

README

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

  1. Clone or download this repository
  2. Install dependencies:
npm install
  1. Build the server:
npm run build
  1. 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

Contributing

Feel free to submit issues and enhancement requests!

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured