# DummyImage MCP

> DummyImage lets you generate dynamic placeholder images instantly from text prompts for web development and design. You just describe what you need—a size, a color scheme, or some text overlay—and it returns the exact URL. This means your AI agent acts like a rapid UI prototyper, filling layout gaps for mockups or prototypes without leaving your workflow.

## Overview
- **Category:** developer-tools
- **Price:** Free
- **Tags:** placeholder-images, web-development, mockups, prototyping, image-generation

## Description

Stop wasting time looking up placeholder image services or manually creating empty colored boxes in Figma. With this MCP, you talk to your agent and it handles the visual assets. You can tell it to generate a specific size—like 16:9 for a hero banner—and specify colors that match your brand hex codes. Need custom text on the image? Just ask. The tool even lets you pick formats like PNG or GIF, making sure the asset is ready for deployment right away. It’s basically an instant way to visualize content blocks and test layouts without ever having to load a real picture. When you connect this MCP through Vinkius, your agent becomes a powerful visual assistant built directly into your existing workflow.

## Tools

### generate_image
Creates and returns the URL link for a placeholder image based on your requested dimensions, colors, and text.

## Prompt Examples

**Prompt:** 
```
Generate a 300x250 placeholder image.
```

**Response:** 
```
I've generated the placeholder for you. You can access it here: https://dummyimage.com/300x250/cccccc/000000.gif
```

**Prompt:** 
```
Create a blue 16:9 image with white text saying 'Hero Banner'.
```

**Response:** 
```
The 16:9 Hero Banner image has been created with a blue background and white text. URL: https://dummyimage.com/16:9/0000ff/ffffff.png?text=Hero+Banner
```

**Prompt:** 
```
Generate a 100x100 PNG image for a profile placeholder.
```

**Response:** 
```
I've generated a 100x100 PNG placeholder. Here is the link: https://dummyimage.com/100x100/cccccc/000000.png
```

## Capabilities

### Set custom dimensions
Generate images in specific sizes (e.g., 300x250) or use standard keywords like `hd1080`.

### Control brand colors
Specify background and foreground hex codes so the placeholders match your UI theme.

### Add descriptive text
Place custom labels or required text directly onto the placeholder image.

### Select output format
Choose between common web formats, including PNG, JPG, JPEG, and GIF.

### Define aspect ratios
Test responsive layouts by defining specific ratios like 16:9.

## Use Cases

### Building a Landing Page Wireframe
A developer needs to mock up a three-column feature section. Instead of manually resizing images, they prompt their agent: 'Generate three 300x250 placeholder images with blue backgrounds.' The agent runs `generate_image` and provides the three needed URLs instantly for testing.

### Mocking Up a Hero Banner
A designer needs a prominent banner that must be 16:9, use the brand's specific `#0033CC` color, and include the text 'Welcome'. They prompt their agent with those details, getting the exact PNG URL to drop into the mockups.

### Testing a Profile Component
A developer is building a user dashboard. The component requires small 100x100 profile pictures in JPG format. They ask their agent for that specific placeholder, getting the correct URL without any manual steps.

### Validating Content Blocks
A product manager is presenting a new flow. To show where testimonial images go, they prompt: 'Show me five 400x200 placeholders with white text saying Testimonial.' This immediately visualizes the content structure for stakeholders.

## Benefits

- Stop searching for placeholder sites. Your agent generates the URL directly, so you never lose momentum between writing and designing.
- Test responsive designs accurately by setting specific aspect ratios (like 16:9) right in your prompt. You know exactly how that banner will look.
- Match brand guidelines instantly. Specify hex colors for both the background and foreground text to ensure visual consistency from day one.
- The workflow is faster than copy-pasting assets. Your agent handles size, color, format selection (PNG/JPG), and generation in a single turn.
- Perfect for requirement gathering. Product Managers can visualize content blocks and banner placements using specific dimensions before writing any code.

## How It Works

The bottom line is: you tell your AI what visual asset you need, and it gives you the working link immediately.

1. Subscribe to this MCP and set the token field to 'PUBLIC'.
2. Start talking to your agent in any compatible client (Claude, Cursor, etc.).
3. Ask it to generate a placeholder image URL with specific parameters like size or color.

## Frequently Asked Questions

**How do I use DummyImage MCP to generate a specific size image?**
You pass the dimensions directly in your prompt using `generate_image`. For example, asking for 'a 600x400 placeholder' will give you the correct URL immediately.

**Can DummyImage MCP handle multiple image formats?**
Yes. You can request different formats like PNG or JPG by including the format in your prompt when using `generate_image`. This keeps your assets ready for various platforms.

**What if I want to add text using DummyImage MCP?**
You specify the required text and its color directly in your request. The agent will use `generate_image` to overlay custom labels onto the placeholder, ensuring your headlines are visible.

**Do I need a special key for DummyImage MCP?**
No. Since this is a public utility, you enter 'PUBLIC' in the token field when connecting the MCP to your agent client.

**How does the generate_image tool handle defining aspect ratios?**
The generate_image tool accepts specific aspect ratio definitions, like 16:9. This lets you test how your content looks in responsive containers without needing to calculate exact dimensions.

**Can I use the generate_image tool to control image colors?**
Yes, you can specify hex codes for both background and foreground colors. This ensures your generated mockups match your project's brand guidelines perfectly.

**Does generate_image support standard size keywords besides specific pixel dimensions?**
Absolutely. In addition to providing exact measurements (e.g., 300x250), you can use common keywords like 'hd1080' or 'medrect' for quick, industry-standard placeholder sizes.

**What is the best way to integrate generate_image into a development workflow?**
You should run the tool directly through your AI client. It generates image URLs you can immediately embed into your front end, cutting out the need for external placeholder services.

**Can I specify custom text to appear on the generated image?**
Yes! Use the `text` parameter in the `generate_image` tool to define any string you want to display in the center of the placeholder.

**What image formats are supported by the generator?**
The `generate_image` tool supports `gif`, `jpg`, `jpeg`, and `png` formats. You can specify your preference using the `format` parameter.

**Do I need to include the '#' symbol for hex colors?**
No. When using `background_color` or `foreground_color`, provide the hex code directly without the hash (e.g., '000000' for black or 'fff' for white).