🎨 Image Generator MCP Server

The missing piece of vibe coding — AI can generate your code, now it generates your images too.

Works with Claude Code · Cursor · Windsurf · any MCP client

Wedding Website — hero section, navigation, gallery Generated in ~10 seconds with one prompt

Korean Restaurant Website — food photography, menu layout Generated in ~10 seconds with one prompt

Every image above was generated by this MCP server. No stock photos. No Photoshop. No Midjourney tab-switching.
Just vibe code your site and the images appear alongside your HTML & CSS.

Quick Install · Why This Matters · Models · Tools · Examples · trucopilot.com

---

🚀 Why This Exists — The Missing Piece of Vibe Coding

Vibe coding changed everything — except images.

Claude Code, Cursor, Windsurf — they can scaffold an entire website in minutes. Pixel-perfect layouts, responsive grids, beautiful typography, dark mode, animations. But open the result in a browser and what do you see?

Grey placeholder boxes. Broken <img> tags. Empty hero sections. Skeleton UIs with no soul.

The code is there. The CSS is flawless. But the visual identity is completely missing — because AI coding tools generate text and code, not images. You're forced to stop your flow, open Midjourney or DALL-E in another tab, generate images separately, download them, rename them, drag them into your project, update the paths... The magic of vibe coding dies the moment you need a picture.

🔌 This MCP server fixes that — permanently.

Install it once, and your AI coding assistant can now generate ultra-realistic 2K images inline — right alongside the HTML and CSS it's already writing. Hero banners, food photography, product shots, team portraits, background textures — all created in real-time, auto-saved to your project, and referenced in your code. Zero context switching. Zero placeholder images.

✨ Before vs. After:

Without Image Generator	With Image Generator
❌ Hero sections with placeholder.jpg	✅ Stunning AI-generated banners that match your brand
❌ Feature cards with broken image icons	✅ Custom illustrations generated per feature
❌ "Add your image here" TODO comments	✅ Real images, auto-saved, auto-referenced in code
❌ Static, lifeless mockups you're embarrassed to demo	✅ Production-ready pages with full visual design
❌ Stop coding → open Midjourney → download → rename → drag	✅ Images generated inline — zero context switching

🎯 Every page element, covered:

• 🖥️ Hero Sections — Full-width 16:9 cinematic banners with dramatic lighting and atmosphere
• 🃏 Cards & Features — 1:1 or 4:3 custom illustrations that bring product features to life
• 👤 Avatars & Profiles — Ultra-realistic or stylized portraits, any style
• 📱 Mobile Screens — 9:16 splash screens, onboarding flows, story-format content
• 🍽️ Product & Food Photography — Restaurant menus, e-commerce catalogs, editorial spreads
• 🌄 Backgrounds & Textures — Subtle atmospheric images that complete the design
• 🏢 About & Team Pages — Professional environments, company culture imagery

💡 The bottom line:

Your vibe-coded website goes from "skeleton with grey boxes" to "fully designed with real visuals" — in a single AI session, without ever leaving your editor.

Every image in this README — the wedding site, the Korean restaurant, the cherry blossom banner — was generated by this MCP in under 10 seconds each.

---

⚡ Quick Install

One command — paste into your terminal:

claude mcp add --scope user image-generator \
  -e OPENROUTER_API_KEY=YOUR_OPENROUTER_API_KEY \
  -- npx -y @trucopilot/image-generator-vibe-coding

🔑 Get your API key at openrouter.ai/keys — replace YOUR_OPENROUTER_API_KEY above

📁 Project scope only (click to expand)

claude mcp add image-generator \
  -e OPENROUTER_API_KEY=YOUR_OPENROUTER_API_KEY \
  -- npx -y @trucopilot/image-generator-vibe-coding

⚙️ Manual JSON config — Claude Code, Cursor, Windsurf, etc. (click to expand)

{
  "mcpServers": {
    "image-generator": {
      "command": "npx",
      "args": ["-y", "@trucopilot/image-generator-vibe-coding"],
      "env": {
        "OPENROUTER_API_KEY": "your-openrouter-key-here"
      }
    }
  }
}

---

🤖 Vibe Coding Prompt — Copy & Paste

Drop this prompt into Claude Code (or any AI coding tool). Replace the two placeholders and it will auto-configure everything — MCP install, CLAUDE.md rules, persistent memory.

💡 This is the recommended way to set up image generation in your vibe coding workflow.

Fetch this doc: https://github.com/TruCopilot/image-generator-vibe-coding and install the
image-generator MCP server for me. Use user scope if possible, otherwise project scope.

Install command:
claude mcp add --scope user image-generator \
  -e OPENROUTER_API_KEY=[YourOpenRouterAPIKey] \
  -- npx -y @trucopilot/image-generator-vibe-coding

Then update my CLAUDE.md (or AGENTS.md) and your memory with these image generation rules:

# Image Generation (MANDATORY for all visual content)

- MCP Server: `image-generator` (via @trucopilot/image-generator-vibe-coding)
- Model: `[YourModelName]`
  - OpenRouter: `google/gemini-2.5-flash-image` (fast) or `google/gemini-3-pro-image-preview` (quality)
  - Gemini direct: `gemini-2.5-flash-image` (fast) or `gemini-3-pro-image-preview` (quality)
- Provider: OpenRouter (default)

## Rules
- ALWAYS use the `image-generator` MCP to generate images when working on new designs,
  building UI, or making the site more beautiful — hero sections, banners, cards,
  backgrounds, avatars, and any visual content
- CRITICAL: Always call via sub-agent (Agent tool) — base64 image data will crash
  the main context window if returned directly
- Resolution: Always `2K` — never go below unless I explicitly ask
- Style: Ultra-realistic, high detail, professional photography quality — include
  lighting, composition, and mood descriptors in every prompt
- Aspect ratios — choose based on design context:
  - `1:1`  → Avatars, profile pics, square cards, thumbnails
  - `16:9` → Hero banners, page headers, blog covers, landscape backgrounds
  - `9:16` → Mobile splash screens, story formats, vertical banners
  - `3:4` / `4:3` → Product cards, feature sections
  - `2:3` / `3:2` → Portrait/landscape editorial layouts
- Output directory: `./public/images/generated/` (or project-appropriate path)
- After generating, use the saved file path in <img> or CSS background-image
  — never embed base64 in markup

## Sub-Agent Pattern (Required)
Always generate images through a sub-agent like this:
  Agent tool → "Use the image-generator MCP generate_image tool with:
    prompt: '<detailed visual description>',
    model: '[YourModelName]',
    aspectRatio: '<pick based on context>',
    imageSize: '2K',
    outputDir: './public/images/generated/'
  Report back ONLY the saved file path, do NOT return image data."

Save this to your persistent memory so every future session uses these rules automatically.

Replace before pasting:

Placeholder	Replace with	Example
[YourOpenRouterAPIKey]	Your OpenRouter API key	sk-or-v1-abc123...
[YourModelName]	Full model ID from your provider	OpenRouter: google/gemini-2.5-flash-image · Gemini: gemini-2.5-flash-image

---

🔌 Providers

☁️ OpenRouter default Access 300+ models via one API OpenAI-compatible · Auto-detected OPENROUTER_API_KEY Get your key →

🔷 Google Gemini fallback Direct Gemini API access Used when only Gemini key is set GEMINI_API_KEY Get your key →

Provider is auto-detected from available env vars. OpenRouter is preferred. Override per-request with the provider parameter.

---

🧠 Models

Model	OpenRouter ID	Gemini ID	Best For
⚡ Flash	google/gemini-2.5-flash-image	gemini-2.5-flash-image	Fast, high-volume generation
💎 Pro	google/gemini-3-pro-image-preview	gemini-3-pro-image-preview	Maximum quality output

🔍 Browse 300+ image models on OpenRouter →

Any model ID from that page works directly in the model parameter.

---

🛠 Tools

🖼️ generate_image

Generate an image from a text prompt.

Parameter	Type	Default	Description
prompt	string	(required)	Text description of the image
model	string	google/gemini-2.5-flash-image	Full model ID — see Models. Shortcuts: flash, pro
aspectRatio	enum	1:1	1:1 · 16:9 · 9:16 · 3:4 · 4:3 · 2:3 · 3:2 · 4:5 · 5:4 · 21:9
imageSize	enum	2K	0.5K · 1K · 2K · 4K
outputDir	string	./generated-images	Directory to save generated images
provider	enum	auto-detect	openrouter · gemini

✏️ edit_image

Edit an existing image with text instructions.

Parameter	Type	Default	Description
prompt	string	(required)	Edit instructions
imagePath	string	(required)	Path to source image
model	string	google/gemini-2.5-flash-image	Full model ID — same options as above
aspectRatio	enum	(optional)	Output aspect ratio
outputDir	string	./generated-images	Directory to save edited images
provider	enum	auto-detect	openrouter · gemini

---

📐 Aspect Ratio Guide

Ratio	Resolution	Best For
1:1	1024×1024	Avatars, profile pics, square cards, thumbnails
16:9	1344×768	Hero banners, page headers, blog covers, landscape BGs
9:16	768×1344	Mobile splash, stories, vertical banners, wallpapers
3:4 / 4:3	864×1184	Product cards, feature sections, content blocks
2:3 / 3:2	832×1248	Portrait/landscape editorial, magazine layouts
4:5 / 5:4	896×1152	Social media posts, Instagram
21:9	1536×672	Ultra-wide banners, cinematic headers

---

💬 Examples

Once configured, just ask your AI assistant:

"Generate a hero image of a futuristic cityscape at night, neon lights, rain reflections"

"Create a 16:9 banner for my blog post about machine learning"

"Edit this image to add dramatic clouds and golden hour lighting"

"Generate a 1:1 avatar of a friendly robot mascot, 3D rendered, studio lighting"

---

🔧 Development

git clone https://github.com/TruCopilot/image-generator-vibe-coding.git
cd image-generator-vibe-coding
npm install
npm run build

Test locally:

OPENROUTER_API_KEY=your-key node dist/index.js

---

Built with ❤️ by TruCopilot

GitHub · npm · OpenRouter · MIT License