drio
Open app

MCP Image Placeholder Server

Source

A lightweight MCP server for generating placeholder images from multiple providers.

Catalog onlyCatalog onlySTDIO

Overview

MCP Image Placeholder Server is a lightweight server that generates placeholder images from multiple providers, allowing developers to easily integrate image placeholders into their applications.

To use the server, clone the repository, set up the configuration, and call the image_placeholder function with the desired parameters to generate image URLs.

  • Generates placeholder images from supported providers like placehold and lorem-picsum. - Validates input parameters for image generation. - Returns image URLs for immediate use in applications.
  1. Quickly generating placeholder images for web development.
  2. Testing layouts and designs without needing final images.
  3. Integrating with other tools like Claude for Desktop and Cursor.

Add to your AI client

Use these steps to connect MCP Image Placeholder Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mcp-image-placeholder-husniadil": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-image-placeholder-husniadil"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "mcp-image-placeholder-husniadil": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-image-placeholder-husniadil"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mcp-image-placeholder-husniadil": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-image-placeholder-husniadil"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mcp-image-placeholder-husniadil": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-image-placeholder-husniadil"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-image-placeholder-husniadil": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-image-placeholder-husniadil"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mcp-image-placeholder-husniadil": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-image-placeholder-husniadil"
      ]
    }
  }
}

FAQ

What image providers are supported?

The server supports `placehold` for simple placeholders and `lorem-picsum` for real images.

What are the requirements to run the server?

You need Python 3.9+ and the `uv` package manager.

How do I configure the server?

Follow the configuration instructions in the documentation to connect the server to your applications.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":1449,"uuid":"8c01262b-6d7c-43ac-8d50-51cec0e0957e","name":"mcp-image-placeholder","title":"MCP Image Placeholder Server","description":"A lightweight MCP server for generating placeholder images from multiple providers.","avatar_url":"https://avatars.githubusercontent.com/u/10581130?v=4","created_at":"2025-02-20T15:52:52.379Z","updated_at":"2025-02-23T07:21:39.856Z","status":"created","author_name":"husniadil","author_avatar_url":"https://avatars.githubusercontent.com/u/10581130?v=4","tags":"mcp,image-placeholder,server","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/husniadil/mcp-image-placeholder","target":"_self","content":"$29","summary":"$2a","img_url":"https://github.com/husniadil/mcp-image-placeholder/raw/main/example/cursor-agent.png","type":null,"metadata":null,"user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools