How to Add NanoBanana Image Editing to Claude Code with MCP

How to Add NanoBanana Image Editing to Claude Code with MCP

When you are building a feature, writing docs, or polishing a demo, image work often breaks your flow: you leave the terminal, open a separate product, upload assets, copy results back, and then return to the codebase. NanoBanana MCP gives Claude Code a direct image generation and editing tool inside the same terminal session, so you can ask for visuals while Claude still has your project context.

What you can do

The documented NanoBanana MCP setup exposes two tools to Claude Code:

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

The practical difference from a standalone drawing app is that Claude Code can call these tools while you are already working in a repository. For example, you can ask it to create a 404-page illustration, remove unwanted text from an image, or combine objects from one image with the scene of another. The source guide describes NanoBanana as using Google Gemini at its core, with image understanding strong enough to reason about relationships between images.

How it works

The setup is a remote MCP server configuration. Claude Code talks to the NanoBanana MCP endpoint over HTTP, and the request is authorized with an Ace Data Cloud API token. The endpoint in the documentation is:

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

You do not need a separate token specifically for NanoBanana. The documentation says one Ace Data Cloud API token can be used for all MCP servers provided by Ace Data Cloud. The important operational rule is simple: keep the real token local, do not paste it into public repositories, issues, screenshots, or chat records, and use placeholders such as YOUR_ACEDATACLOUD_API_KEY in shared examples.

Choose the right Claude Code scope

Claude Code supports three configuration scopes for this MCP server. The command shape is the same; only the -s value changes.

  • local: bind the MCP server to the current project directory. This is a good first test because it limits the configuration to the project where you run the command.
  • user: make the server available across projects opened with Claude Code. Use this if image generation and editing is part of your regular workflow.
  • project: write configuration into the project-level .mcp.json. This is useful for team projects, but the real token should not be committed to a public repository.

The guide also notes that a project-level configuration may appear as Pending approval the first time Claude Code reads it. That is a normal security prompt; confirm trust from inside the Claude Code session before using the server.

Configure NanoBanana for the current project

For a first run, I would start with the local scope. It proves the endpoint, token, and client configuration without changing every project on your machine.

claude mcp add nanobanana --transport http https://nanobanana.mcp.acedata.cloud/mcp   -H "Authorization: Bearer YOUR_ACEDATACLOUD_API_KEY"   -s local

Two small details matter. First, -H must be uppercase; lowercase -h means --help. Second, replace only the token placeholder after Authorization: Bearer. Keep the URL and transport exactly as shown unless the documentation changes.

If you want the same server available in every project, use the documented user scope:

claude mcp add nanobanana --transport http https://nanobanana.mcp.acedata.cloud/mcp   -H "Authorization: Bearer YOUR_ACEDATACLOUD_API_KEY"   -s user

For a team repository, the documented project-level form is:

claude mcp add nanobanana --transport http https://nanobanana.mcp.acedata.cloud/mcp   -H "Authorization: Bearer YOUR_ACEDATACLOUD_API_KEY"   -s project

In team settings, treat that command as a pattern rather than a secret-bearing artifact. Use an environment-variable placeholder or have each teammate add their own token locally.

Verify the connection before asking for images

After adding the server, run the documented verification command:

claude mcp list

If nanobanana shows ✓ Connected, the handshake worked. If it does not, check the token, service URL, and selected configuration scope. The guide explicitly recommends not judging the current status from historical Claude Code client versions or fixed tool counts, because the client and server surface can change over time.

Use it like a builder, not like a prompt gallery

Once connected, the best workflow is to ask Claude Code for the visual asset in the same language you would use with a teammate. The documented examples are practical:

  • For composition: Place the phone from the first image onto the desk in the second image, adjusting the angle and lighting to make it look natural.
  • For cleanup: Edit this image to remove the text watermark in the lower right corner, filling it with the background.
  • For product or docs work: Generate an illustration of a small dinosaur squatting next to a crack in the ground looking down, to be used for a 404 page.

What makes this useful is not only the image model. It is the fact that Claude Code already knows the surrounding task: the README you are editing, the route that needs an empty-state illustration, or the product page that needs a more consistent visual. The MCP server becomes a callable tool arm inside that context.

Where this fits in a real workflow

I would use NanoBanana MCP for assets that are tied to code or documentation: 404 illustrations, README diagrams, product screenshots that need cleanup, and small composite images for release notes. Keep prompts specific about source image order, desired object placement, lighting, and what should remain unchanged. When multiple source images are involved, describe each one by role: “the first image is the product,” “the second image is the background,” and then state the transformation.

The setup is intentionally small: one MCP endpoint, one bearer token header, one verification command, and two available tools. That makes it easy to test in one repository first, then promote to a user-level configuration if it becomes part of your normal build loop.

For the full command reference and related Claude Code notes, read the source guide: Claude Code with NanoBanana MCP.

Comments

Post a Comment

Popular posts from this blog

Artistic QR Code API Integration Guidance

Image
Artistic QR code is an innovative technological product that combines QR codes with beautiful background images, creating practical and visually appealing works. They not only possess the functionality of traditional QR codes, allowing quick scanning and recognition by smart devices, but also incorporate artistic elements to enhance visual appeal and brand recognition. Some artistic QR codes are even generated by artificial intelligence, fully leveraging modern technology to demonstrate unparalleled innovation and uniqueness. This makes artistic QR codes widely applicable in areas such as brand marketing and advertising. In simple terms, artistic QR codes are the perfect combination of QR code scanning and artistic aesthetics. They not only provide the function of information transmission, but also enhance the user's visual experience, making each scan a delightful artistic enjoyment. Overview of Artworks Let's take a look at a few QR code works: How are they? These are ar...
Read more

How to Configure Claude Code with CC Switch and Ace Data Cloud

Image
If you use Claude Code across a terminal, VS Code, or remote development setup, the awkward part is often not the model itself but the configuration: where should requests go, where should the token live, and how do you switch providers without editing files by hand? This guide walks through a practical setup using CC Switch as the graphical configuration manager and Ace Data Cloud as the Anthropic-compatible base URL. The goal is simple: configure Claude Code once, verify the active endpoint, and keep the setup easy to change later. What you can do With the setup described in the Ace Data Cloud documentation, you can: Manage Claude Code provider configuration through a desktop UI instead of manually editing settings.json . Store an Ace Data Cloud provider with ANTHROPIC_BASE_URL and ANTHROPIC_AUTH_TOKEN . Switch the active Claude Code provider from CC Switch without rewriting your configuration every time. Use the same provider configuration from the terminal an...
Read more

How to Build a Server-Side Image Editing Workflow with GPT-Image-2

Image
If your product needs image editing, the hard part is rarely the model call itself. The real challenge is building a reliable workflow around user images, reference assets, predictable output sizes, and slow-running jobs without forcing every file through a manual upload step. This guide walks through a practical server-side workflow using the OpenAI Images Edits API on Ace Data Cloud. The focus is gpt-image-2 , because the documented editing flow supports direct image URLs, base64 input, multiple reference images, high-resolution output through size , and asynchronous callbacks. What you can do The edits endpoint is designed for turning one or more input images plus an instruction into a modified output image. In practical terms, you can use it to: Convert an existing infographic or poster into a different visual theme while preserving its layout. Change a product, shelf, room, or object style while keeping the original arrangement stable. Pass image URLs directly f...
Read more