Investigate Nano-Banana MCP for AI image generation

[nille]

Overview

Investigate whether Nano-Banana MCP should be included in shipkit's MCP installation flow.

What it is: MCP server for AI image generation and editing using Google's Gemini 2.5 Flash Image API.

Capabilities

From the README:

• 🎨 Generate images from text descriptions
• ✏️ Edit existing images with text prompts
• 🔄 Iterative editing (refine images)
• 🖼️ Reference image style transfer
• 📁 Auto file management

Usage:

"Generate an image of a sunset over mountains"
"Edit this image to add birds in the sky"
"Continue editing to make it more dramatic"

Questions to Answer

1. Use Cases

• Who benefits? (frontend devs, designers, documentation writers?)
• Real-world value? (mockups, assets, prototypes?)
• How often would typical user need this?

2. Quality & Maintenance

• Well-maintained or abandoned?
• Production-ready or experimental?
• Active community?

3. Setup Complexity

• Requires: Google Gemini API key
• Cost: What's the API cost per image?
• Free tier: Does Gemini have free limits?
• Setup friction: Easy or complex?

4. Where Does It Belong?

Option A: Core
✅ Universally useful (every dev needs images?)
❌ Niche (not everyone does UI/UX work)
❌ Requires API key + setup

Option B: Experimental
✅ New/unproven in shipkit
✅ Users can try it out
❌ Might be mature enough for Advanced

Option C: Advanced
✅ Specialized for frontend/design work
✅ Opt-in for those who need it
✅ Matches browser-test pattern
❓ Is it niche or broadly useful?

Option D: Marketplace
✅ Keep it opt-in, no core commitment
✅ User discovers when needed
❌ Less discoverable

5. Integration Strategy

If we include it:

During /install skill:

Would you like to install any MCP servers?

Essential (free):
  [ ] Brave Search
  [ ] GitHub
  
Development:
  [ ] Playwright
  
Creative/UI:
  [ ] Nano-Banana - AI image generation
      Requires: Gemini API key (free tier available)
      Use case: Generate mockups, assets, UI prototypes

Or: Add to Advanced layer with a /generate-image skill that wraps it

Recommendation Needed

After investigation:

Placement: [Core / Experimental / Advanced / Marketplace / Skip]

Rationale:
- [Use case frequency]
- [Setup complexity]
- [Who benefits]

Implementation:
- [Add to install flow? Y/N]
- [Create wrapper skill? Y/N]
- [Which layer?]

Similar Decisions

• ✅ Browser automation → Advanced (niche, complex setup)
• ✅ Playwright MCP → Opt-in during install (requires Node.js)
• ✅ Brave Search → Essential (free, enhances /research)

Where does image generation fit?

Investigation Tasks

• Test Nano-Banana MCP with Claude Code
• Check Gemini API pricing and free tier
• Assess setup friction
• Determine real-world use case frequency
• Decide on layer placement
• Write integration plan

[nille]

Update: Better Version Available

Found a superior fork: daveremy/nano-banana-2-mcp

Why daveremy's version is better:

Newer model:

• Uses Gemini 3.1 Flash (vs 2.5 in original)

More features:

• Resolution control (1K, 2K, 4K)
• Aspect ratio control (1:1, 16:9, 9:16, 4:3, etc.)
• Thinking modes (minimal or high quality)
• Multiple image generation (1-4 variations)

Critical improvements:

• File-path-only mode - Fixes context window overflow in Claude Code
• Security hardening (path validation, file size caps)
• Built-in Claude Code plugin - Ready to use

Example usage:

claude plugin add nano-banana-2-mcp

Or manual config:

{
  "mcpServers": {
    "nano-banana-2": {
      "command": "npx",
      "args": ["-y", "nano-banana-2-mcp"],
      "env": {
        "GEMINI_API_KEY": "your-key"
      }
    }
  }
}

Recommendation

Use daveremy/nano-banana-2-mcp instead of original ConechoAI version.

Placement: Advanced layer (Creative/Design tools)

• Specialized use case (not everyone generates images)
• Requires Gemini API key
• Opt-in during install for frontend/design-focused developers

Will add to:

• docs/mcp-servers.md under "Creative Tools"
• seed/mcp.sample.json with proper config
• Offered during /install in "Creative/Design" category

[nille]

Additional Context

Found excellent guide: How to Connect Image Generation to Claude Code (MCP Nano Banana)

This provides real-world usage examples and setup walkthrough for nano-banana MCP with Claude Code.

Key Insights from Article

Practical use cases demonstrated:

• Generating UI mockups for applications
• Creating assets for projects
• Iterative design refinement
• Quick prototyping

Setup walkthrough shows:

• How to get Gemini API key (free tier available)
• Configuration for Claude Code
• Example prompts and outputs
• Common troubleshooting

Value proposition:

• Fast mockup generation (seconds vs hours in Figma)
• Iterate on designs conversationally
• No design tool context switching
• Good for technical folks who aren't designers

Assessment

After reading the guide, nano-banana-2-mcp looks like:

Good fit for:

• Solo developers building MVPs (need quick mockups)
• Technical founders doing design (speed over perfection)
• Backend devs who occasionally need UI assets

Not essential for:

• Designers (they use proper tools)
• Pure backend/infra work
• Projects with dedicated design teams

Recommendation: Advanced layer under "Creative Tools"

• Valuable for a specific audience (devs doing design work)
• Not everyone needs it (domain-specific)
• Requires API key setup
• Opt-in during install

Should be offered alongside Google Stitch (#49) and UI-UX-PRO-MAX (#47) as a cohesive creative toolkit for developers who do occasional design work.

Implementation Plan

1. Add to docs/mcp-servers.md under new "Creative/Design" section
2. Add to seed/mcp.sample.json with daveremy's version
3. Offer during /install skill:

   Creative Tools (for developers doing design work):
     [ ] Nano-Banana-2 - AI image generation
     [ ] Google Stitch - UI mockup generation
     [ ] UI-UX-PRO-MAX - Design reference database
   

4. Create wrapper skill /generate-image in Advanced layer (optional)

Next Steps

• Test daveremy/nano-banana-2-mcp setup
• Verify free tier limits (Gemini API)
• Document in mcp-servers.md
• Add to sample config
• Integrate into install flow