MCP Image Placeholder

MCP Image Placeholder Server

This is a Model Context Protocol (MCP) server that provides a tool for generating placeholder images from different providers.

Features

• Generates placeholder images from supported providers
• Supports two image providers:
  • placehold: Provides simple placeholder images
  • lorem-picsum: Provides real images as placeholder images
• Validates input parameters
• Returns image URLs for immediate use

Requirements

• Python 3.9+
• uv package manager

Installation

1. Clone this repository
2. Set up the configuration for MCP server

Usage

The server exposes one tool:

image_placeholder

Generate a placeholder image URL based on specified parameters.

Parameters:

• provider: The image provider to use (placehold or lorem-picsum)
• width: The width of the image (1-10000)
• height: The height of the image (1-10000)

Returns:

• URL string of the generated image

Example Usage:

# Generate a 300x200 placeholder image
url = image_placeholder(provider="placehold", width=300, height=200)
 
# Generate a 500px square lorem-picsum image
url = image_placeholder(provider="lorem-picsum", width=500)

Configuration

To connect this server to Claude for Desktop:

1. Add the following to your claude_desktop_config.json:

   {
       "mcpServers": {
           "image-placeholder": {
               "command": "uv",
               "args": [
                   "--directory",
                   "/ABSOLUTE/PATH/TO/PROJECT",
                   "run",
                   "main.py"
               ]
           }
       }
   }

   Copy

2. Restart Claude for Desktop

To connect this server to Cursor:

1. Open Cursor Settings
2. Head to the Features section
3. Scroll down to the MCP Servers section
4. Click on the Add new MCP server button
5. Enter the following information:
   • Name: image-placeholder
   • Type: command
   • Server URL: uv --directory /ABSOLUTE/PATH/TO/PROJECT run main.py
6. Click on the Add ↵ button

Troubleshooting

If the tool is not detected, use absolute path of the uv command, e.g.

/ABSOLUTE/PATH/TO/uv --directory /ABSOLUTE/PATH/TO/PROJECT run main.py

Example Usage and Output (Cursor)

Prompt:

Create a new directory named "example" and a file named output.html.

Then create a single modern looking page using tailwindcss: https://unpkg.com/@tailwindcss/browser@4

Show a nice header, content, and footer, showing a photo gallery.

Save this into output.html

Screenshot of Cursor Agent

Output: Example Output (Cursor)

License

MIT License