🎨 Image Generator MCP Server

AI image generation for vibe coding — powered by OpenRouter & Google Gemini

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

Quick Install · Models · Tools · Examples · trucopilot.com

---

🚀 Why This Exists — The Missing Piece of Vibe Coding

Vibe coding tools can generate text, code, and CSS — but they can't generate images.

Every AI coding platform today — Claude Code, Cursor, Windsurf — can scaffold an entire website in minutes. Beautiful layouts, perfect typography, responsive grids, dark mode toggles. But open the result and what do you see? Grey placeholder boxes. Broken image icons. Empty hero sections. The design falls flat because the visuals are missing.

This is the problem we solve.

This MCP server is the bridge between AI-generated code and AI-generated visuals. When your vibe coding tool builds a landing page, it can now simultaneously generate the hero image, the feature illustrations, the team headshots, the background textures — all ultra-realistic, 2K resolution, perfectly sized for the layout it just created.

✨ What changes with this MCP:

Without Image Generator	With Image Generator
❌ Hero sections with placeholder.jpg	✅ Stunning AI-generated hero banners that match your brand
❌ Feature cards with missing icons	✅ Custom illustrations generated per feature
❌ "Add your image here" comments	✅ Real images, auto-saved, auto-referenced in code
❌ Static, lifeless mockups	✅ Production-ready pages with full visual design
❌ Manual Midjourney/DALL-E workflow	✅ Images generated inline during vibe coding — zero context switching

🎯 Built for vibe coding workflows:

• 🖥️ Hero Sections — Full-width 16:9 banners with dramatic lighting, depth, and atmosphere
• 🃏 Cards & Features — 1:1 or 4:3 illustrations that bring product features to life
• 👤 Avatars & Profiles — 1:1 ultra-realistic or stylized portraits
• 📱 Mobile Screens — 9:16 splash screens, onboarding visuals, story-format content
• 🌄 Backgrounds — Subtle textures, gradients, and atmospheric images for sections
• 🏢 About & Team Pages — Professional headshots, office environments, company culture imagery

The result? Your vibe-coded website goes from "skeleton with placeholder boxes" to "production-ready with full visual design" — in a single AI session.

💡 The hero banner at the top of this README was generated by this MCP server in under 10 seconds.

---

⚡ 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