🎨 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

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.

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.

• 🖥️ 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

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.

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

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

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

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:

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

🔍 Browse 300+ image models on OpenRouter →

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

Generate an image from a text prompt.

Edit an existing image with text instructions.

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"

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