How to Edit Images from Cursor with NanoBanana MCP

If you already live in Cursor while writing code, docs, release notes, or UI copy, switching to a separate image tool for every screenshot polish or product mockup breaks the flow. NanoBanana MCP gives Cursor Agent mode a focused image generation and editing toolset, so you can ask for practical visual changes without leaving the editor.

What you can do

The source document describes NanoBanana as an image tool that is especially useful for modifying existing images. It is built around a Google Gemini model and is intended for edits where the model needs to understand the visual content, not just create something unrelated from a prompt.

In a Cursor workflow, that means you can ask the agent to help with tasks such as:

• Beautifying a plain terminal or app screenshot before using it in a blog post.
• Combining multiple images, for example placing a product from one image into a scene from another.
• Redrawing an image in the style of another image.
• Generating small illustrations, such as an image for a 404 page.

The documented tool list is intentionally small: nanobanana_generate_image for text-to-image generation and nanobanana_edit_image for image editing with support for multiple image inputs.

How it works

Cursor supports MCP servers through configuration files. The NanoBanana server is exposed as a remote HTTP MCP endpoint:

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

You connect Cursor to that endpoint by creating a project-level MCP config file at .cursor/mcp.json. The config registers an MCP server named nanobanana, sets its type to http, points url at the remote MCP URL, and sends your Ace Data Cloud API token through an Authorization bearer header.

Once Cursor restarts and the MCP server is available, you can use natural language in Agent mode. Cursor decides when to call the available NanoBanana tools based on the task.

Configure NanoBanana MCP in a Cursor project

Create a file named .cursor/mcp.json in your project root. Use this structure, replacing yourToken with your own token:

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

A few practical notes for builders:

• Keep the file out of public repositories if it contains a real token.
• Use the exact server URL shown above; it is the documented NanoBanana MCP endpoint.
• Restart Cursor after saving the file so the MCP server can be discovered.
• Run the image requests from Agent mode, where Cursor can invoke MCP tools.

Scenario 1: turn a raw screenshot into a publishable image

A common builder problem is that the thing you want to explain is technically useful but visually rough: a terminal window, a local dashboard, or a quick prototype screenshot. The source guide suggests a simple editing instruction like this:

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

This is a good fit for nanobanana_edit_image because the goal is not to invent a new diagram. The goal is to preserve the original screenshot while improving framing, background, and presentation. For a technical blog or README, that distinction matters: the image should still communicate the real interface or output.

Scenario 2: compose a product image into a real scene

The document also calls out multi-image composition. In practice, you might have one image of a device or product and another image of a desk, room, or background. Instead of manually cutting, scaling, and warping the asset, you can ask Cursor to use both images:

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

The important documented capability here is that nanobanana_edit_image supports multiple image URLs. That lets you describe relationships between inputs: the first image can provide the product, while the second provides the environment. When you write the prompt, be explicit about which image plays which role.

Scenario 3: generate lightweight illustrations while coding

Although NanoBanana is strongest when editing existing images, the source document also lists nanobanana_generate_image for text-to-image generation. That can be useful for small product surfaces where you need a quick visual placeholder or illustration.

For example, the guide gives this style of request:

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

This kind of prompt is compact, scoped, and tied to a real UI use case. You are not asking the model to design the whole page; you are generating one visual asset that fits into an existing implementation.

A simple working checklist

1. Create .cursor/mcp.json in the project root.
2. Add the mcpServers.nanobanana configuration with type, url, and headers.Authorization.
3. Restart Cursor.
4. Open Agent mode with the image URLs or image context you want to work from.
5. Ask for a specific edit, composition, or generated illustration.

My preferred way to write these prompts is to describe the input roles, the desired output, and the constraints in one short paragraph. For example: “Use the first image as the product source, use the second image as the background scene, keep the product recognizable, and adjust scale and perspective naturally.”

Closing thoughts

The useful part of NanoBanana MCP is not that it adds another image generator to your stack. It puts image editing close to the place where builders already make decisions: the editor. When you are writing a README, polishing a tutorial screenshot, or composing a product mockup, that proximity saves context switching.

If you want the exact Cursor configuration and the original tool list, read the official Cursor with NanoBanana MCP guide.