nano-banana-mcp-app

Nano Banana MCP App

Give Claude the power to generate and edit images using Google Gemini AI.

!Demo

Features

• generate-image - Create images from text prompts
• edit-image - Modify the last generated image with new prompts
• Works in Claude Desktop and Claude.ai (with MCP Apps extension)
• Automatic image compression (WebP, max 800px)

Quick Start

1. Get a Gemini API Key

1. Go to Google AI Studio
2. Click "Create API Key"
3. Copy your key

---

Option A: Claude Desktop (No Hosting Required)

Works locally on your machine. No server hosting needed.

Setup

1. Open your Claude Desktop config file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

1. Add this configuration:

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

1. Restart Claude Desktop

1. Start chatting! Ask Claude to generate images.

---

Option B: Claude.ai (Web) via Cloudflare Tunnel

Use with Claude.ai in your browser. Requires exposing the server to the internet.

Step 1: Clone and Install

git clone https://github.com/AnassKartit/nano-banana-mcp-app.git
cd nano-banana-mcp-app
npm install

Step 2: Set Environment Variable

export GEMINI_API_KEY="your-api-key-here"

Step 3: Build and Run the Server

npm run build
npm run serve

Server starts at http://localhost:3001/mcp

Step 4: Expose with Cloudflare Tunnel

In a new terminal:

# Install cloudflared if needed
brew install cloudflared

# Create tunnel
cloudflared tunnel --url http://localhost:3001

Copy the generated URL (e.g., https://random-name.trycloudflare.com)

Step 5: Add to Claude.ai

1. Go to claude.ai
2. Click your profile → Settings → Connectors
3. Click Add Connector
4. Enter your tunnel URL + /mcp:

   https://random-name.trycloudflare.com/mcp

1. Click Connect

Step 6: Use It!

Start a new conversation and ask Claude to generate images.

---

Usage Examples

Generate an Image

"Generate an image of a diamond-encrusted Ferrari"

Edit the Image

"Make it gold plated"

More Ideas

"Create a logo for a coffee shop called 'Morning Brew'" "Generate a sunset over mountains" "Make it look like a watercolor painting"

---

Environment Variables

| Variable | Required | Description | |----------|----------|-------------| | GEMINI_API_KEY | Yes | Your Google Gemini API key | | PORT | No | Server port (default: 3001) | | NANOBANANA_MODEL | No | Gemini model (default: gemini-2.0-flash-exp) |

---

Troubleshooting

"No image generated"

• Check your Gemini API key is valid
• Some prompts may be blocked by content filters

"Connection refused" (Claude.ai)

• Make sure your server is running (npm run serve)
• Make sure Cloudflare tunnel is active
• Check the URL ends with /mcp

Server not starting

• Run npm run build first
• Check Node.js version (18+ required)

---

Development

# Clone
git clone https://github.com/AnassKartit/nano-banana-mcp-app.git
cd nano-banana-mcp-app

# Install
npm install

# Set API key
export GEMINI_API_KEY="your-key"

# Dev mode (hot reload)
npm run dev

# Build
npm run build

# Run
npm run serve

---

License

MIT

Author

Anass Kartit

---

Star this repo if you find it useful! ⭐