# Nano Banana MCP App

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

![Demo](https://raw.githubusercontent.com/AnassKartit/nano-banana-mcp-app/main/demo.gif)

## 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](https://aistudio.google.com/apikey)
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`

2. Add this configuration:

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

3. Restart Claude Desktop

4. 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

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

### Step 2: Set Environment Variable

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

### Step 3: Build and Run the Server

```bash
npm run build
npm run serve
```

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

### Step 4: Expose with Cloudflare Tunnel

In a new terminal:

```bash
# 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](https://claude.ai)
2. Click your profile → **Settings** → **Connectors**
3. Click **Add Connector**
4. Enter your tunnel URL + `/mcp`:
   ```
   https://random-name.trycloudflare.com/mcp
   ```
5. 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

```bash
# 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](https://x.com/akartit)

---

**Star this repo if you find it useful!** ⭐