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 working inside a terminal, the small context switch from code to image tooling can become surprisingly expensive: open a browser, upload assets, describe the edit, download the result, and then return to the project. If the image task is part of a README, landing page, release note, or UI polish pass, it is more natural to keep the work inside the same coding session.

This guide walks through connecting Claude Code to the NanoBanana MCP server from Ace Data Cloud, then using it for image generation, image editing, and multi-image composition directly from natural language prompts in the terminal.

What you can do

The NanoBanana MCP integration gives Claude Code two callable image tools:

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

The practical difference from a generic image generator is that NanoBanana is designed for image understanding. The source documentation describes workflows such as taking an item from one image and placing it into the scene of another image, while adjusting angle and lighting so the result looks natural. That makes it useful for product mockups, README illustrations, UI empty states, and quick visual experiments where the source image relationships matter.

How it works

Claude Code supports MCP, which lets the coding agent call external tools from the same terminal-oriented workflow where it reads files, edits code, runs commands, and explains errors. Ace Data Cloud exposes NanoBanana as a remote MCP server at:

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

You authenticate the MCP connection with an Ace Data Cloud API token in the Authorization header. The documentation uses the safe placeholder YOUR_ACEDATACLOUD_API_KEY; do not paste a real token into public repositories, screenshots, issues, or shared chat logs.

Get an API token

Before configuring Claude Code, open the Ace Data Cloud console application list and copy an API token for local use. The same token can be used across Ace Data Cloud MCP servers, so you do not need a NanoBanana-specific credential.

Keep the token local. For team projects, avoid committing the real value into a public repository. If you later choose project-level configuration, use a placeholder or an environment-variable based workflow so each teammate can provide their own token locally.

Choose the right Claude Code scope

The setup command is the same shape in all cases; the main decision is the -s scope. The -H flag must be uppercase because lowercase -h means --help.

Local scope: try it in one project

Use -s local when you want the configuration bound only to the project directory where you run the command. Claude Code writes the record into your local ~/.claude.json together 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

User scope: reuse it across projects

Use -s user if you expect to call NanoBanana from many repositories. The configuration is written as a user-level Claude Code setting, and future projects opened with Claude Code can see it.

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

Project scope: share the MCP setup with a team

Use -s project when a private team project should carry the MCP configuration in the project root. The documentation notes that this writes to .mcp.json. When Claude Code reads project-level configuration for the first time, it may show Pending approval; confirm trust inside the Claude Code session before using the server.

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

Verify the connection

After adding the server, list your configured MCP connections:

claude mcp list

If nanobanana appears with ✓ Connected, the handshake succeeded. If it fails, check three things before changing anything else: the token value, the service URL, and the chosen configuration scope.

Use it like a builder, not like a prompt library

Once the MCP server is connected, return to the Claude Code session and ask for the image operation in ordinary language. A few grounded patterns from the documentation are enough to cover many real product tasks.

For multi-image composition, provide the image URLs and describe the relationship between them:

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, describe the unwanted region and what should replace it:

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

For product or documentation illustrations, start with a concrete scene and intended use:

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 useful habit is to keep the request tied to the repository context: mention where the image will be used, what format or aspect ratio would fit the page, and whether the output is a draft asset or something closer to production. Claude Code can then help place the result into the right folder, update references, or continue iterating without leaving the terminal.

A simple workflow to try first

  1. Add the NanoBanana MCP server with -s local in a throwaway project.
  2. Run claude mcp list and confirm nanobanana is connected.
  3. Ask Claude Code to generate a small illustration for a README or 404 page.
  4. Then try nanobanana_edit_image with two image URLs to test composition.
  5. If the workflow becomes part of your regular process, switch to -s user or a carefully managed -s project setup.

That is the main value: image work becomes one more callable tool inside the builder loop, alongside reading code, editing files, and running commands. For the original setup details and related references, see the Claude Code with NanoBanana 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