DummyImage Connector for AI agents.
1 live capability
Create custom placeholder images for web designs and UI mockups.
Waiting for input…
Why people use DummyImage
DummyImage for Faster Web Design Placeholders
With this Connector, that friction disappears. You just tell your AI client what you need, and it generates a direct link to a perfectly sized image with your preferred colors and text. You get to stay in your code or design capability, keeping your momentum going without the constant context switching.
What Vinkius changes
You get instant, customizable image URLs for any web project without ever leaving your chat interface.
Use it from Claude, ChatGPT, Cursor or another AI client you already have.
One account · 5,900+ Connectors
- Real-world use case 01
Wireframing a landing page
A designer asks for a 16:9 blue banner with "Hero" text to see how it fits the header.
- Real-world use case 02
Building a profile gallery
A dev needs 100x100 PNGs for user avatars and wants them all in a specific grey hex.
- Real-world use case 03
Rapid prototyping
A PM wants to see how a 300x250 ad block looks in a news feed layout before the creative team delivers it.
Complete set · 1capability
The complete DummyImage capability set.
These are the exact actions your AI can choose when you ask it to work with DummyImage.
01
1 capability in this set.
Part of 1 available through DummyImage.
- 01 Capability
Generate image
Create a custom placeholder image URL by specifying dimensions, colors, or text. This gives you a direct link to a visual asset for your mockups.
Set up in minutes
One URL. Then ask DummyImage to work.
Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use DummyImage from the conversation.
Choose your client
Live previewAdvanced clients IDE · CLI
Claude · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_xgR0gtQvOX80CEAieHXAS1z32eTZNMWEdskeVYiy/mcp - Step 01
Open Connectors
In Claude Web or Claude Desktop, open Settings and choose Connectors.
- Step 02
Add the URL
Choose Add custom connector, name it DummyImage, and paste the URL above.
- Step 03
Turn it on in chat
Select +, open Connectors, and enable DummyImage for the conversation.
ChatGPT · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_xgR0gtQvOX80CEAieHXAS1z32eTZNMWEdskeVYiy/mcp - Step 01
Open MCP settings
On desktop, open Settings and MCP servers. On web, open your workspace app or connector settings.
- Step 02
Add the URL
Choose Add server with Streamable HTTP, or create a custom MCP app, then paste the DummyImage URL.
- Step 03
Save and start
Save the connection and enable DummyImage in your conversation. Desktop may ask you to restart once.
Cursor · IDE configuration
Advanced setup
{
"mcpServers": {
"dummyimage": {
"url": "https://edge.vinkius.com/vk_preview_xgR0gtQvOX80CEAieHXAS1z32eTZNMWEdskeVYiy/mcp"
}
}
}- Step 01
Open MCP Settings
Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) → search "MCP Settings"
- Step 02
Add the server config
Paste the JSON configuration above into the mcp.json file that opens
- Step 03
Save the file
Cursor will automatically detect the new Connector
- Step 04
Start using DummyImage
Open Agent mode in chat and ask: "Using DummyImage, help me...". 1 tools available
VS Code Copilot · IDE configuration
Advanced setup
{
"mcpServers": {
"dummyimage": {
"url": "https://edge.vinkius.com/vk_preview_xgR0gtQvOX80CEAieHXAS1z32eTZNMWEdskeVYiy/mcp"
}
}
}- Step 01
Create MCP config
Create a .vscode/mcp.json file in your project root
- Step 02
Add the server config
Paste the JSON configuration above
- Step 03
Enable Agent mode
Open GitHub Copilot Chat and switch to Agent mode using the dropdown
- Step 04
Start using DummyImage
Ask Copilot: "Using DummyImage, help me...". 1 tools available
Windsurf · IDE configuration
Advanced setup
{
"mcpServers": {
"dummyimage": {
"url": "https://edge.vinkius.com/vk_preview_xgR0gtQvOX80CEAieHXAS1z32eTZNMWEdskeVYiy/mcp"
}
}
}- Step 01
Open MCP Settings
Go to Settings → MCP Configuration or press Cmd+Shift+P and search "MCP"
- Step 02
Add the server
Paste the JSON configuration above into mcp_config.json
- Step 03
Save and reload
Windsurf will detect the new server automatically
- Step 04
Start using DummyImage
Open Cascade and ask: "Using DummyImage, help me...". 1 tools available
Cline · IDE configuration
Advanced setup
{
"mcpServers": {
"dummyimage": {
"url": "https://edge.vinkius.com/vk_preview_xgR0gtQvOX80CEAieHXAS1z32eTZNMWEdskeVYiy/mcp"
}
}
}- Step 01
Open Cline MCP Settings
Click the Connectors icon in the Cline sidebar panel
- Step 02
Add remote server
Click "Add Connector" and paste the configuration above
- Step 03
Enable the server
Toggle the server switch to ON
- Step 04
Start using DummyImage
Ask Cline: "Using DummyImage, help me...". 1 tools available
Claude Code · Terminal command
Advanced setup
claude mcp add dummyimage --transport http "https://edge.vinkius.com/vk_preview_xgR0gtQvOX80CEAieHXAS1z32eTZNMWEdskeVYiy/mcp"- Step 01
Install Claude Code
Run npm install -g @anthropic-ai/claude-code if not already installed
- Step 02
Add the Connector
Run the command above in your terminal
- Step 03
Verify the connection
Run claude mcp to list connected servers, or type /mcp inside a session
- Step 04
Start using DummyImage
Ask Claude: "Using DummyImage, show me...". 1 tools are ready
Where the request belongs
Work DummyImage can move forward.
Web developers and UI designers who need to fill layout gaps quickly without hunting for assets. It's for the person who wants to see a "Hero Banner" in a mockup right now.
Frontend Developer
Populates layout gaps with correctly sized images during the build phase.
UI/UX Designer
Creates wireframes with specific placeholders without switching tabs.
Product Manager
Visualizes content blocks and banner placements during requirement gathering.
Build the capability set
Add more capabilities.
Each Connector adds new actions and data without changing how you work.
Browse ConnectorsLorem Picsum
Generate placeholder images and retrieve image metadata directly from your AI agent using the Lorem Picsum API.
PlaceDog
Generate dog placeholder images with custom dimensions for your design and development projects.
Bannerbear (Image Gen)
Automate image and video generation via Bannerbear. create dynamic assets from templates and manage collections directly from your AI agent.
Abyssale
Automated creative production. generate dynamic images, banners, and personalized visuals via AI.
NiftyImages
Manage personalized images and dynamic content via NiftyImages. track images, widgets, and countdown timers directly from your AI agent.
Image Router
Route image generation requests to the best AI model automatically based on prompt type, style, and quality requirements.
Bring your own AI
Change the model, client or framework. Keep DummyImage connected.
-
Claude -
ChatGPT -
Gemini -
Cursor -
VS Code -
Windsurf -
ZCode -
Cline -
Zed -
Continue -
Kiro -
Roo Code -
Zencoder -
Goose -
Void -
Augment Code -
Amp -
Qodo -
Tabnine -
Pieces -
Sourcegraph Cody -
JetBrains -
Warp -
Amazon Q -
Antigravity -
BoltAI -
Raycast -
Jan -
LM Studio -
AnythingLLM -
Open WebUI -
Msty -
Cherry Studio -
LibreChat -
TypingMind -
Chorus -
5ire -
n8n -
LangChain -
LlamaIndex -
CrewAI -
Vercel AI SDK
Before you connect
Questions about DummyImage.
The practical details behind the request, access and result.
What is DummyImage MCP for?
It's used to create custom placeholder images for web design and UI mockups. It helps you fill layout gaps with correctly sized visuals instantly.
Can I change the colors of the images?
Yes, you can specify background and foreground hex colors to match your brand or UI theme.
Does it support different file formats?
Yes, you can choose between common web formats including PNG, JPG, and GIF.
How do I set up DummyImage MCP in Cursor?
Connect the Connector through Vinkius and enter 'PUBLIC' in the token field. You can then ask your agent to generate images.
Can I add custom text to the placeholders?
Yes, you can add custom labels or descriptive text directly onto the generated images to clarify content blocks.
Is this good for real production websites?
This capability is designed for mockups, prototypes, and development. It is not intended for high-resolution production assets.
Can I specify custom text to appear on the generated image?
Yes! Use the text parameter in the generate_image capability 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 capability 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).
One connection away
Give your agent a direct line to DummyImage.
Connect DummyImage once. Keep it beside 5,900+ managed Connectors when the next task needs more.
Explore every Connector No credit card required · Free tier available