How to Use NanoBanana MCP in Claude Code for Image Editing Workflows

How to Use NanoBanana MCP in Claude Code for Image Editing Workflows

When a coding task needs a visual asset, the slow part is often leaving the terminal: open a browser, upload references, write a prompt, download the result, and then return to the repo. NanoBanana MCP lets Claude Code call image generation and image editing tools directly from the same terminal workflow.

What you can do

The Ace Data Cloud NanoBanana MCP documentation focuses on two practical capabilities inside Claude Code:

  • nanobanana_generate_image for text-to-image generation.
  • nanobanana_edit_image for image editing, including workflows that pass multiple image URLs.

That makes it a good fit for builder tasks where the image is part of the product work rather than a separate design session: README illustrations, 404 page artwork, product mockups, background cleanup, or combining an object from one image with the scene from another.

How it works

Claude Code supports MCP servers over HTTP. The NanoBanana server is exposed at https://nanobanana.mcp.acedata.cloud/mcp, and Claude Code sends an authorization header with your Ace Data Cloud API token. Once the server is added, Claude Code can discover the tools and call them while it is already reading files, editing code, or running commands.

The important mental model is simple: do not treat image generation as a one-off browser action. Treat it as a tool call in your development loop. Claude Code can understand the task context, call the MCP tool, and then help you place the returned image in the right part of your project.

Step 1: Prepare an API token

First, create or copy an Ace Data Cloud API token from the application list in the console. Keep the real value private. The examples below use YOUR_ACEDATACLOUD_API_KEY as a placeholder, and that placeholder is the only form you should put into shared docs, screenshots, public issues, or sample configuration.

One useful detail from the setup guide: the same Ace Data Cloud token can be used across the MCP servers provided by the platform, so you do not need a separate token just for NanoBanana.

Step 2: Add NanoBanana MCP to Claude Code

The command uses claude mcp add, HTTP transport, the NanoBanana MCP URL, and an Authorization header. The -H flag must be uppercase; lowercase -h means help.

For a single project trial, use the local scope:

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

The local scope is bound to the project directory where you run the command. According to the guide, Claude Code writes this record into the local ~/.claude.json along with the current project path.

If you expect to use NanoBanana across many projects, add it at 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 project scope writes configuration into .mcp.json in the current project root:

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

Project scope is convenient for shared workflows, but do not commit a real token to a public repository. Use a placeholder or let each teammate add their own local configuration. The guide also notes that Claude Code may show Pending approval when it first reads a project-level MCP configuration; approve it only when you trust the project configuration.

Step 3: Verify the connection

After adding the server, list your MCP servers:

claude mcp list

If nanobanana shows ✓ Connected, the handshake succeeded. If it fails, check three things before debugging anything else: the token, the service URL, and the configuration scope. The documentation also cautions against relying on old client versions or a fixed number of tools as your status check; use the current connection result.

Step 4: Use it in real builder workflows

Once connected, you can ask Claude Code for visual work in natural language. For composition, the guide highlights that nanobanana_edit_image can accept multiple image URLs, so you can ask for relationships between images instead of describing everything from scratch:

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 tasks, you can ask it to remove unwanted text or watermarks and fill the area with background:

Edit this image to remove the text watermark in the lower right corner, filling it with the background.

For product pages or docs, you can generate a fresh illustration:

Generate an illustration of a small dinosaur squatting next to a crack in the ground looking down, to be used for a 404 page.

A practical way to fold this into your repo

A simple pattern is to keep an assets/ folder and ask Claude Code to produce the visual, save the returned URL or downloaded file location in a short note, and then update the README, docs page, or frontend component that needs it. The value is not only that an image gets created; it is that the image task happens in the same loop where the code, copy, and file placement are already being handled.

If you are experimenting, start with -s local. When you find yourself using the workflow repeatedly, move to -s user. Use -s project only when the workflow itself should be part of the project, and keep secrets out of version control.

For the complete setup notes and related references, read the Claude Code with Nano Banana MCP documentation.

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