Nano Banana Pro MCP

🚀 nano-banana-pro-mcp

nano-banana-pro-mcp 是一個 MCP 服務器，它能讓像 Claude 這樣的 AI 智能體藉助 Google 的 Gemini 圖像生成模型（包括 Nano Banana Pro - gemini-3-pro-image-preview）來生成圖像。

注意：我覺得 Google Antigravity 能用 nanobanana 生成圖像很酷，所以借鑑了這個想法。

🚀 快速開始

你可以參考下面的示例，使用本項目讓 Claude 生成旅行頁面的英雄圖像。

💻 使用示例

基礎用法

以下是 Claude Code 使用 MCP 為旅行著陸頁生成英雄圖像的示例：

生成的精美結果如下：

📦 安裝指南

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

根據文本提示生成圖像。你還可以選擇提供參考圖像來引導風格或內容。

參數：

示例提示：

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

根據指令編輯一個或多個圖像。

參數：

示例提示：

Add sunglasses to this photo

Remove the background from this image

Combine these two images into one scene

describe_image

分析並描述一個或多個圖像，僅返回文本（不生成圖像）。

參數：

示例提示：

[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 Inspector 進行測試

npx @modelcontextprotocol/inspector node dist/index.js

然後在檢查器的環境中設置 GEMINI_API_KEY，並調用 generate_image 工具。

📄 許可證

本項目採用 MIT 許可證。