MCP Image Placeholder

🚀 MCP Image Placeholder Server

This is a Model Context Protocol (MCP) server that offers a tool to generate placeholder images from different providers.

🚀 Quick Start

The MCP Image Placeholder Server is a useful tool for generating placeholder images. To get started, follow the installation and configuration steps below.

✨ Features

• Generate placeholder images based on specified parameters.
• Support two image providers:
  • placehold: Provides simple placeholder images.
  • lorem-picsum: Provides real images as placeholder images.
• Validate input parameters.
• Return directly usable image URLs.

📦 Installation

Compatibility Requirements

• Python 3.9+
• uv package manager

Steps

1. Clone this repository.
2. Configure the MCP server.

💻 Usage Examples

Basic Usage

The server exposes a tool:

image_placeholder

Generate a URL for a placeholder image 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).

Return Value:

• A string representing the generated image URL.

# Generate a 300x200 pixel 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)

📚 Documentation

Configuration

Connect this server to Claude for Desktop:

1. Add the following content to claude_desktop_config.json:

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

2. Restart Claude for Desktop.

Connect this server to Cursor:

1. Open Cursor settings.
2. Go to the Features section.
3. Scroll to the MCP Servers section.
4. Click 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 the Add ↵ button.

Troubleshooting

If the tool is not detected, use the absolute path of the uv command, for example:

/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 - page using Tailwind CSS: https://unpkg.com/@tailwindcss/browser@4

Display a nice title, content, and footer to showcase a photo gallery.

Save this to output.html

Output: Example Output (Cursor)

📄 License

MIT License