How to Add NanoBanana Image Editing to Claude Code with MCP

How to Add NanoBanana Image Editing to Claude Code with MCP

If your workflow already lives in the terminal, switching to a browser just to edit a product screenshot or compose two reference images can break your focus. This guide shows how to connect NanoBanana MCP to Claude Code so image generation and image editing can sit next to code review, docs work, and release prep.

The goal is not to replace a design tool. It is to make small, useful visual tasks callable from the same Claude Code session where you are already reading files, writing copy, or preparing an implementation note.

What you can do

The NanoBanana MCP document describes two callable tools:

  • nanobanana_generate_image for text-to-image generation.
  • nanobanana_edit_image for image editing, including multiple image inputs.

The most interesting part is composition. The docs explain that NanoBanana can understand relationships between images: for example, you can provide two image URLs and ask it to place an object from one image into the scene of another. That makes it useful for product mockups, documentation illustrations, visual QA notes, and lightweight marketing assets generated from real project context.

How it works

Claude Code connects to NanoBanana through a managed MCP server at https://nanobanana.mcp.acedata.cloud/mcp. The transport is HTTP, and authentication is passed as an uppercase -H header:

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

The uppercase -H matters. In the Claude Code command, lowercase -h is --help, so using the wrong flag will not add the authorization header.

Once the server is registered, Claude Code can call the NanoBanana tools from natural language. You do not need to paste a full API request into each conversation; you describe the visual task, and Claude Code routes it to the MCP tool when appropriate.

Choose the right scope

The same MCP server can be added with one of three scopes. Pick the smallest scope that matches your workflow.

  • -s local: use this for a first trial. The configuration is tied to the project directory where you run the command and is written into the local ~/.claude.json together with the current project path.
  • -s user: use this when you want NanoBanana available across projects. The user-level configuration is written into ~/.claude.json, and future Claude Code projects can see it.
  • -s project: use this for a team project. Claude Code writes the configuration into .mcp.json in the project root. The docs note that this can be committed to a private repository, but the real token should not be committed to public repositories.

For a shared setup, the command shape stays the same; only the scope changes:

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

When Claude Code reads a project-level MCP configuration for the first time, it may show Pending approval. That is expected; approve the project configuration inside the Claude Code session only if you trust the repository.

Verify the connection before using it

After adding the server, run:

claude mcp list

A working setup should show nanobanana with ✓ Connected. If it does not connect, check three things first: the token value, the MCP server URL, and the selected scope. The docs also recommend not relying on old client versions or fixed historical tool counts to decide whether the current setup is healthy.

Practical image-editing prompts

Once the connection works, keep prompts concrete. For composition, describe the role of each image and the visual constraints you care about:

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, be specific about what should disappear and how the background should be restored:

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

For documentation assets, you can ask for a new illustration 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.

These examples are intentionally small. A good builder workflow is to generate one useful visual, inspect it, then ask for a narrower edit. Treat the MCP tool as part of an iterative loop rather than a one-shot poster generator.

A safe setup pattern

For personal use, start with -s local. If you find yourself using the same image workflow across repos, move to -s user. For teams, use -s project only after deciding how each developer will provide their own token. The docs explicitly recommend keeping the real token in local configuration or private environment variables, and showing only masked placeholders such as YOUR_ACEDATACLOUD_API_KEY in public examples.

That pattern keeps the useful part of the workflow—Claude Code calling nanobanana_generate_image and nanobanana_edit_image—close to your project, without leaking credentials into issues, screenshots, or repositories.

Next step

If you already use Claude Code for implementation notes, README updates, or release prep, NanoBanana MCP is a practical way to add image editing to the same loop. Start with the local command, verify with claude mcp list, then try a two-image composition prompt on a non-sensitive asset.

Read the source documentation 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