Image Placeholder

by husniadil

8 stars

258 downloads

Not rated

GitHub

About

Generates customizable placeholder images from placehold.co and Lorem Picsum for rapid development and UI testing.

Details

Author: husniadil
Repository: husniadil/mcp-image-placeholder
GitHub stars: 8
Downloads: 258
License: MIT License
Categories: Developer Tools, Design, Other, Productivity, Media, Project Management, Frontend, API

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below
Plugin Name Image Placeholder

Command (node, npx, python, etc.) uv
Arguments
- Argument 1 --directory
- Argument 2 /ABSOLUTE/PATH/TO/PROJECT
- Argument 3 run
- Argument 4 main.py
Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

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

JSON

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

JSON

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

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

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

JSON

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

JSON

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

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

From the repository

Install Python 3.9+ and the uv package manager, then configure the server in claude_desktop_config.json or Cursor's MCP settings. The server exposes one tool, image_placeholder, which takes a provider (placehold or lorem-picsum), a width, and an optional height (both 1–10000) and returns an image URL.

`image_placeholder`

Generate a placeholder image URL based on specified parameters. Parameters: provider (string), width (integer, 1-10000), height (integer, 1-10000). Returns: URL string of the generated image.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

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

Linux

{
    "cwd": null,
    "env": [],
    "args": [
        "--directory",
        "/ABSOLUTE/PATH/TO/PROJECT",
        "run",
        "main.py"
    ],
    "shell": false,
    "command": "uv"
}

Macos

{
    "cwd": null,
    "env": [],
    "args": [
        "--directory",
        "/ABSOLUTE/PATH/TO/PROJECT",
        "run",
        "main.py"
    ],
    "shell": false,
    "command": "uv"
}

Windows

{
    "cwd": null,
    "env": [],
    "args": [
        "--directory",
        "/ABSOLUTE/PATH/TO/PROJECT",
        "run",
        "main.py"
    ],
    "shell": false,
    "command": "uv"
}

Generates placeholder images from various providers like placehold.co and lorem-picsum.

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

- Generates placeholder images from supported providers
- Supports two image providers:

- placehold: Provides simple placeholder images
- lorem-picsum: Provides real images as placeholder images
- Clone this repository
- Set up the configuration for MCP server

Generate a placeholder image URL based on specified parameters.

- provider: The image provider to use (placeholdorlorem-picsum)
- width: The width of the image (1-10000)
- height: The height of the image (1-10000)

# 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)

To connect this server to Claude for Desktop:

- Add the following to yourclaude_desktop_config.json:

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

- Open Cursor Settings
- Head to theFeaturessection
- Scroll down to theMCP Serverssection
- Click on theAdd new MCP serverbutton
- Enter the following information:

- Name:image-placeholder
- Type:command
- Server URL:uv --directory /ABSOLUTE/PATH/TO/PROJECT run main.py

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

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

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

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

An MCP server that allows AI assistants to interact with Adobe After Effects.

Figma MCP server for accessing Figma files, projects, comments, components, and design metadata from Claude, Cursor, and other AI agents.

Enables AI assistants to interact with Figma via WebSocket for reading data and design analysis.

Let your agents generate wireframes for your next app or feature, make iterations, and build off approved designs.

Build better interfaces with TypeUI design systems, UI prompts, and layout variations.

Turn UI designs into responsive applications with Visily MCP

Create crafted UI components inspired by the best 21st.dev design engineers.

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

Manage and utilize website content within the DevHub CMS platform

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

image_placeholder

Claude Desktop / Cursor

Linux

Macos

Windows

To connect this server to Claude for Desktop:

Install

More like this

Sequential Thinking

Sentry

Github

Filesystem

EverArt

Google Drive

`image_placeholder`