Image Generator MCP Server

An MCP (Model Context Protocol) server for AI image generation using Google Gemini. Supports OpenRouter (default) and direct Gemini API. Works with Claude Code, Cursor, Windsurf, and any MCP-compatible tool.

Quick Install — Paste This Prompt Into Claude Code

Copy the prompt below, replace the two placeholders, and paste it into Claude Code (or any vibe coding tool). It will install the MCP, update your project config, and set up image generation rules automatically.

Before you paste: Get your OpenRouter API key at openrouter.ai/keys

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:

Providers

Provider is auto-detected from available env vars (OpenRouter preferred). You can override per-request with the provider parameter.

Models

Browse all image models: OpenRouter Image Models — any model ID from this page works with the model parameter.

Setup

1. Get an API Key

• OpenRouter (recommended): Get your key at OpenRouter Keys
• Gemini: Get your key at Google AI Studio

2. Add to your MCP client

Claude Code

claude mcp add image-generator -- npx -y @trucopilot/image-generator-vibe-coding

Then set your API key:

export OPENROUTER_API_KEY=your-key-here
# or
export GEMINI_API_KEY=your-key-here

Manual config (Claude Code, Cursor, Windsurf, etc.)

Add to your MCP settings:

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

Tools

generate_image

Generate an image from a text prompt.

edit_image

Edit an existing image with text instructions.

Examples

Once configured, ask your AI assistant:

• "Generate an image of a sunset over mountains"
• "Create a logo for a coffee shop called Bean There"
• "Edit this image to make the sky more dramatic"
• "Generate a 16:9 banner image for my blog post about AI"

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

License

MIT