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 visual assets, the slow part is often not the prompt itself — it is leaving the terminal, opening another app, uploading references, waiting for a result, and then bringing the image back into your project.

NanoBanana MCP is useful because it puts image generation and image editing directly inside Claude Code. Instead of treating images as a separate design step, you can ask Claude Code to reason about your project and call a remote MCP server when a visual asset is needed.

What you can do

The Ace Data Cloud NanoBanana MCP documentation describes two practical capabilities:

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

That second part is the reason this setup is interesting for builders. The docs describe NanoBanana as an image tool that understands image content: for example, you can provide two images and ask it to place an item from image A into the scene of image B. The service uses Google’s Gemini model at its core, so the intended workflow is less about one-off prompting and more about visual composition with context.

Good use cases include product-image composition, removing unwanted text from screenshots, and generating lightweight page illustrations such as a 404-page visual. The important detail is that these tasks can be initiated from the same Claude Code session where you are already editing the app.

How it works

Claude Code supports MCP servers over HTTP. Ace Data Cloud exposes NanoBanana through this MCP endpoint:

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

You add that endpoint to Claude Code with an Ace Data Cloud API token in the Authorization header. The documented command uses claude mcp add, the server name nanobanana, --transport http, the MCP URL, an uppercase -H header flag, and one of three configuration scopes.

The uppercase header flag matters: the docs call out that -H must be uppercase, because lowercase -h is interpreted as --help.

Install it for one project first

If you are trying NanoBanana MCP for the first time, the local scope is the lowest-friction option. It binds the configuration to the current project directory and writes the record into the local Claude configuration associated with that path.

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

Use this when you want to test a workflow without affecting every repository on your machine. Keep the real token out of public repositories, issues, screenshots, and chat logs; the docs recommend showing only a placeholder such as YOUR_ACEDATACLOUD_API_KEY.

Move to user scope when it becomes part of your workflow

If you regularly create visual assets while working across multiple projects, configure the same MCP server with user scope:

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

This writes the configuration at the user level, so future Claude Code projects can see the same MCP server. For solo builders, this is usually the most convenient long-term setup once the first local test succeeds.

Use project scope carefully for teams

The project scope is meant for shared project configuration. The docs state that Claude Code writes this configuration into .mcp.json in the project root, which can be useful for private team repositories.

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

Do not commit a real token to a public repository. If the configuration will be shared, replace the token with an environment-variable placeholder or have each teammate add the credential locally. The first time Claude Code reads project-level MCP configuration, it may show Pending approval; the docs describe this as a normal trust prompt for project configuration.

Verify the connection

After adding the server, verify the handshake from the terminal:

claude mcp list

If nanobanana shows ✓ Connected, the connection is working. If it does not, check three things before debugging anything else: the token, the service URL, and the selected configuration scope.

Try a real editing prompt

Once connected, return to Claude Code and describe the visual operation in plain language. For a multi-image composition, a practical prompt might be:

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 a cleanup task, you could ask:

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

And for application UI work, you can generate a small illustration directly from the terminal:

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

The workflow is simple: keep Claude Code in the loop, let it decide when to call nanobanana_generate_image or nanobanana_edit_image, and save the output where your project needs it. That makes image work feel less like a context switch and more like another tool in the build process.

For the exact setup commands and the source documentation, see the Claude Code with Nano Banana MCP guide.

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