How to Use NanoBanana MCP in Cursor for Practical Image Editing

Most image tools are easiest to use when you are already in a browser tab. But when you are writing a README, polishing a product page, or preparing screenshots for a blog post, the place where you actually notice the need for an image edit is often your editor. This guide shows how to wire NanoBanana MCP into Cursor so the editing step can happen inside the same agent workflow where you write and ship.

The goal is not to replace a design tool. It is to make small, practical visual tasks easier: cleaning up a screenshot, composing two images, or generating a lightweight illustration while you are still working in the project.

What you can do

The NanoBanana MCP document describes two main capabilities exposed to Cursor:

• nanobanana_generate_image for text-to-image generation.
• nanobanana_edit_image for image editing, including multiple image input.

That second point is the useful one for builders. Instead of asking an image model for a completely new asset every time, you can start from the real material you already have: a screenshot, a product photo, or a scene background. The documentation gives two concrete examples: placing the product from image A onto the background of image B, and redrawing one image in the style of another.

How it works

Cursor can connect to external tools through MCP. For NanoBanana, the configuration is an HTTP MCP server entry named nanobanana. The remote URL is:

https://nanobanana.mcp.acedata.cloud/mcp

Authentication is passed with an Authorization header using a Bearer token. Once the file is saved and Cursor is restarted, the tools are available from Agent mode. From that point on, you can ask Cursor to edit or generate images in natural language while it keeps the task context from your project.

Configure Cursor

Create a file named .cursor/mcp.json in the root of your project. The document uses this structure:

{
  "mcpServers": {
    "nanobanana": {
      "type": "http",
      "url": "https://nanobanana.mcp.acedata.cloud/mcp",
      "headers": {
        "Authorization": "Bearer yourToken"
      }
    }
  }
}

Replace yourToken with your own API token. Do not commit a real token to a shared repository. For team projects, keep this file local, ignore it, or use a pattern where each developer supplies their own secret outside source control.

After saving the file, restart Cursor. The restart matters because Cursor needs to reload the MCP server configuration before the tools appear in Agent mode.

Use case 1: make a terminal screenshot publishable

A common builder problem: the screenshot is correct, but visually rough. Maybe it is a plain terminal capture that would look out of place in a tutorial. The documentation suggests this prompt:

Edit this image, add a rounded corner shadow window decoration, and change the background to a light gray gradient.

This is a good first test because it is bounded. You are not asking for a whole design system. You are asking the model to preserve the screenshot content while improving the presentation. In practice, attach or reference the screenshot in Cursor, then ask Agent mode to use NanoBanana to perform the edit.

Use case 2: compose a product and a scene

The document calls out a more advanced workflow: multi-image composition. For example, you might have a clean product image and a separate desk or workspace image. The prompt can be:

Place the phone from the first image onto the desktop in the second image, adjusting the size and perspective to make it look natural.

This is where nanobanana_edit_image becomes more than a cosmetic helper. Because it supports multiple image URLs, you can describe the relationship between the inputs: which image contains the subject, which image contains the background, and what should change. That makes it useful for mockups, internal prototypes, documentation images, and lightweight product marketing assets that start from real inputs.

Use case 3: generate a small illustration while coding

Sometimes there is no source image. You just need a quick visual, such as a 404 page illustration. The documentation gives this example:

Generate an illustration of a small dinosaur looking down from the edge of a cracked ground, to be used for a 404 page.

For this kind of task, use nanobanana_generate_image. Keep the prompt specific about the asset's job: where it will appear, what mood it should have, and whether it needs to fit a page component. The more concrete the UI context, the easier it is to judge whether the result is useful.

Adapting the same setup elsewhere

The Cursor setup is the most direct path for this guide, but the same document also notes related editor configurations. VS Code uses .vscode/mcp.json with the same configuration under servers. Claude Desktop uses mcpServers in its desktop configuration file, with paths under ~/Library/Application Support/Claude/claude_desktop_config.json on macOS and %APPDATA%\Claude\claude_desktop_config.json on Windows.

If your team uses more than one AI coding surface, the important part is to keep the server URL, Bearer authorization header, and tool expectations consistent.

A practical way to start

Start with one workflow, not ten. I would begin with screenshot cleanup because it is easy to verify: the text should remain readable, the terminal should look better, and the output should be ready for a README or article. Once that works, try multi-image composition with a product image and a scene image.

For the exact MCP configuration and the original tool list, read the Cursor with Nano Banana MCP documentation.