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 inside a terminal, the slow part is often not writing the next function. It is leaving the coding flow to make a README image, clean up a product screenshot, or combine two visual references into one usable asset. The NanoBanana MCP setup for Claude Code is a practical way to keep those image tasks inside the same agent workflow.

What you can do

The Ace Data Cloud document describes NanoBanana MCP as an image generation and image editing server that Claude Code can call from the terminal. The interesting part is not just text-to-image. The documented use cases focus on image understanding: passing multiple image URLs, asking the model to understand relationships between images, and editing or composing them naturally.

In day-to-day builder work, that maps to a few concrete tasks:

  • Generate a small illustration for a 404 page or product empty state.
  • Edit an existing image, such as removing unwanted text from a screenshot.
  • Compose multiple images, for example placing an object from one image into the scene of another.
  • Use Claude Code as the coordinator: it reads project context, calls the MCP tool, and helps organize the result.

The documented NanoBanana MCP tools are nanobanana_generate_image for text-to-image generation and nanobanana_edit_image for image editing with support for multiple image inputs.

How it works

Claude Code can connect to external tools through MCP. In this setup, Ace Data Cloud provides a managed remote MCP server for NanoBanana at https://nanobanana.mcp.acedata.cloud/mcp. You add that server to Claude Code with an Ace Data Cloud API token sent through an HTTP Authorization header.

The workflow is intentionally simple:

  1. Get an Ace Data Cloud API token from the console application list.
  2. Add the NanoBanana MCP server to Claude Code using claude mcp add.
  3. Choose a configuration scope: local, user, or project.
  4. Run claude mcp list and confirm that nanobanana shows ✓ Connected.
  5. Ask Claude Code for image generation or image editing in natural language.

One small but important detail from the setup instructions: the header flag must be uppercase -H. Lowercase -h is help, which is an easy mistake to make when copying commands quickly.

Choose the right configuration scope

The document gives three setup variants. Use local when you are testing the server for one project. Claude Code writes the record into local configuration associated with the current project path.

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

Use user when NanoBanana is part of your normal development environment and should be available across projects.

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

Use project when you want the project to carry the MCP configuration. The document notes that this writes to .mcp.json in the project root. That can be useful in a private team repository, but do not commit a real token to a public repo. If Claude Code sees a project-level configuration for the first time, it may show Pending approval; approving trusted project configuration is expected.

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

Verify before you depend on it

After adding the server, verify the connection rather than assuming it worked:

claude mcp list

If the target service shows ✓ Connected, the handshake succeeded. If it fails, the source document suggests checking the token, service URL, and configuration scope. That is a better debugging path than relying on old screenshots or assuming a fixed number of tools.

Useful prompts once it is connected

Once the server is visible to Claude Code, you do not have to write low-level API calls for every image task. The documented usage is natural-language driven. For composition work, you can provide multiple image URLs and describe the relationship:

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 work, you can ask for a targeted edit:

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

And for a lightweight page illustration, you can ask Claude Code to generate a new asset directly:

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 pattern is to let Claude Code inspect the UI or documentation context first, then ask it to call nanobanana_generate_image or nanobanana_edit_image with a prompt that matches the surrounding product language. That keeps the visual task tied to the repository instead of becoming a disconnected design errand.

Where this fits in a builder workflow

NanoBanana MCP is most useful when an image task is adjacent to coding: README illustrations, landing page placeholders, changelog visuals, screenshot cleanup, or product mockups. The value is not that every developer should become a designer. It is that small visual iterations can happen without breaking terminal focus.

If you want to try the exact setup, read the source document here: Claude Code with Nano Banana 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