How to Use NanoBanana MCP in Cursor for Practical Image Editing Workflows

If you build product pages, docs, demos, or tutorials, you eventually need images that match the code you are writing—screenshots with cleaner framing, product mockups placed into a scene, or a quick 404 illustration without leaving your editor.

This guide walks through a practical way to connect Cursor to the NanoBanana MCP server from Ace Data Cloud, then use it from Agent mode for image generation and multi-image editing. The goal is not to replace design tools. It is to remove the small workflow breaks that happen when a builder has to jump between the editor, browser tabs, upload forms, and prompt history just to create one usable visual.

What you can do

The NanoBanana MCP documentation describes two core tools exposed to Cursor:

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

The multi-image workflow is the interesting part for everyday builders. You can pass a product image and a scene image, then ask the model to place the product into the scene with adjusted size and perspective. You can also ask it to restyle or clean up an existing screenshot for a blog post or documentation page.

How it works

Cursor can talk to external tools through MCP, the Model Context Protocol. Instead of opening a separate image generation interface, you define a remote MCP server in your project configuration. Cursor then exposes the available tools inside Agent mode, where you can invoke them with natural language while staying inside the same workspace.

For NanoBanana, the remote MCP endpoint is:

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

Authentication is handled with an HTTP header:

Authorization: Bearer yourToken

The official setup uses an Ace Data Cloud API token. Keep that token out of public repositories and avoid committing a real .cursor/mcp.json file if it contains secrets.

Configure Cursor

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

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

After saving the file, restart Cursor. Once Cursor reloads the MCP configuration, use Agent mode and ask for image generation or editing tasks directly in the chat.

Use case 1: make a screenshot blog-ready

A common builder problem is that raw screenshots look too rough for documentation. You may have a terminal capture that is technically correct but visually flat. With NanoBanana connected, you can attach the screenshot and ask:

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

This is useful for release notes, README files, landing pages, and tutorials where the screenshot should support the explanation instead of distracting from it. The source document specifically frames this as an image editing task, so it is a good fit for nanobanana_edit_image.

Use case 2: compose a product into a scene

Another practical workflow is multi-image composition. Suppose you have a product image from a product manager and a separate background scene. The documentation describes passing multiple image URLs and letting the AI understand the relationship between them.

A prompt can be as direct as:

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 detail is that nanobanana_edit_image supports multiple image input. That makes the workflow much closer to how builders think: one image is the object, another image is the environment, and the result should look like a coherent composition rather than a detached collage.

Use case 3: generate small product illustrations

Not every asset needs to start from an existing image. The documentation also lists nanobanana_generate_image for text-to-image generation. That is useful for small interface moments: empty states, error pages, tutorial thumbnails, or lightweight visual metaphors.

For 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 teams that build quickly, the advantage is iteration speed. You can ask for a first version, use it in context, then refine the prompt based on the actual UI or document section you are writing.

A simple builder workflow

1. Add the NanoBanana MCP server to .cursor/mcp.json.
2. Restart Cursor so the server is available in Agent mode.
3. Attach the source image or images when editing.
4. Describe the desired change in plain language.
5. Save the returned image into your project docs, blog assets, or product mockups.

Because the configuration is project-local, it works well for documentation-heavy repositories. One project can include the NanoBanana server for visual workflows, while another project can keep a smaller MCP configuration.

Small implementation notes

• Use yourToken as a placeholder in examples, not a real credential.
• If the config contains a real token, add the file to .gitignore or use your team’s normal secret-management pattern.
• Keep prompts specific: identify which image is the product, which image is the background, and what should remain unchanged.
• For blog visuals, ask for restrained edits first. Over-styled images often age worse than clean screenshots.

Wrapping up

NanoBanana MCP is most useful when image work is part of a coding or writing loop: polishing screenshots, composing product scenes, or generating small illustrations while you are already in Cursor. The setup is only a small mcpServers entry, but it changes the workflow from “leave the editor and operate another tool” to “ask the agent to produce the asset where the work is happening.”

For the exact configuration and tool list, see the official Cursor with NanoBanana MCP guide.