Nano Banana Pro MCP

🚀 nano-banana-pro-mcp

このMCPサーバーは、ClaudeのようなAIエージェントがGoogleのGemini画像生成モデル（Nano Banana Pro - gemini - 3 - pro - image - previewを含む）を使用して画像を生成できるようにします。

注意: Google Antigravityがnanobananaを使って画像を生成できるのがクールだと思い、そのアイデアを借りました。

🚀 クイックスタート

🔍 サンプル

以下は、MCPを使用して旅行用ランディングページのヒーロー画像を生成するClaude Codeの例です。

そして、美しい結果です。

📦 インストール

Claude Code CLI

claude mcp add nano-banana-pro --env GEMINI_API_KEY=your_api_key_here -- npx @rafarafarafa/nano-banana-pro-mcp

your_api_key_here を実際のGemini APIキーに置き換えてください。

Claude Desktop

Claude Desktopの設定ファイルに追加します。

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "nano-banana-pro": {
      "command": "npx",
      "args": ["@rafarafarafa/nano-banana-pro-mcp"],
      "env": {
        "GEMINI_API_KEY": "your_api_key_here"
      }
    }
  }
}

Codex CLI

プロジェクトディレクトリ内の .mcp.json を作成または編集します（グローバル設定の場合は ~/.mcp.json）。

{
  "mcpServers": {
    "nano-banana-pro": {
      "command": "npx",
      "args": ["@rafarafarafa/nano-banana-pro-mcp"],
      "env": {
        "GEMINI_API_KEY": "your_api_key_here"
      }
    }
  }
}

Gemini CLI

~/.gemini/settings.json を作成または編集します。

{
  "mcpServers": {
    "nano-banana-pro": {
      "command": "npx",
      "args": ["@rafarafarafa/nano-banana-pro-mcp"],
      "env": {
        "GEMINI_API_KEY": "your_api_key_here"
      }
    }
  }
}

APIキーの取得

Google AI Studio から無料のGemini APIキーを取得してください。

📚 ドキュメント

利用可能なツール

generate_image

テキストプロンプトから画像を生成します。必要に応じて、スタイルや内容をガイドするための参照画像を提供できます。

パラメータ:

• prompt (必須): 生成する画像の説明
• model (オプション): 使用するGeminiモデル（デフォルト: gemini-3-pro-image-preview）
  • gemini-3-pro-image-preview - Nano Banana Pro（最高品質）
  • gemini-2.5-flash-preview-05-20 - Nano Banana（高速）
  • gemini-2.0-flash-exp - 広く利用可能なフォールバック
• aspectRatio (オプション): "1:1" | "3:4" | "4:3" | "9:16" | "16:9"
• imageSize (オプション): "1K" | "2K" | "4K"（画像専用モデルのみ）
• images (オプション): 生成をガイドする参照画像の配列
  • 各画像: { data: "base64...", mimeType: "image/png" }
• outputPath (オプション): 生成された画像を保存するファイルパス（例: /path/to/image.png）

プロンプトの例:

Generate an image of a sunset over mountains

Generate a logo in the style of this reference image [with image attached]

Generate a hero image and save it to ./assets/hero.png

edit_image

指示に基づいて1つ以上の画像を編集します。

パラメータ:

• prompt (必須): 画像を編集する方法の指示
• images (必須): 編集する画像の配列
  • 各画像: { data: "base64...", mimeType: "image/png" }
• model (オプション): 使用するGeminiモデル（デフォルト: gemini-3-pro-image-preview）
• outputPath (オプション): 編集された画像を保存するファイルパス（例: /path/to/image.png）

プロンプトの例:

Add sunglasses to this photo

Remove the background from this image

Combine these two images into one scene

describe_image

1つ以上の画像を分析して説明します。テキストのみを返します（画像生成は行いません）。

パラメータ:

• images (必須): 分析する画像の配列
  • 各画像: { data: "base64...", mimeType: "image/png" }
• prompt (オプション): カスタム分析プロンプト（デフォルト: 一般的な説明）
• model (オプション): 使用するGeminiモデル（デフォルト: gemini-3-pro-image-preview）

プロンプトの例:

[default] Describe this image in detail

What objects are in this image?

How many people are in this photo?

What's the dominant color in this image?

🔧 技術詳細

セットアップ

npm install
npm run build

テスト

npm test              # 単体テストを実行
npm run test:watch    # ウォッチモードでテストを実行
npm run typecheck     # 型チェックを実行（出力なし）

手動テスト

# 実際の画像を生成してtest-output.pngに保存
GEMINI_API_KEY=your_key npm run test:manual "a cute cat wearing sunglasses"

MCPインスペクターでのテスト

npx @modelcontextprotocol/inspector node dist/index.js

その後、インスペクターの環境で GEMINI_API_KEY を設定し、generate_image ツールを呼び出します。

📄 ライセンス

MIT