How to Add NanoBanana Image Editing to Claude Code with MCP

How to Add NanoBanana Image Editing to Claude Code with MCP

If you already live in the terminal with Claude Code, the slow part of visual work is often not prompting an image model — it is leaving your coding context, finding the right UI, uploading references, downloading the result, and then wiring that asset back into the project.

The NanoBanana MCP setup gives Claude Code two image tools inside the same terminal session: one for generating images from text and one for editing images, including multi-image composition. This guide walks through the practical setup and the kinds of workflows it unlocks, using only the commands and tool names documented for the Ace Data Cloud NanoBanana MCP server.

What you can do

Once configured, Claude Code can call NanoBanana through MCP from natural-language instructions. The documented tools are:

  • nanobanana_generate_image — text-to-image generation.
  • nanobanana_edit_image — image editing, including support for multiple image URLs as input.

The useful detail is that this is not limited to simple prompt-to-picture generation. The source document highlights multi-image composition: for example, placing an object from one image into the scene of another image while adjusting angle and lighting. It also gives practical editing examples such as removing an unwanted text watermark from a screenshot and generating a 404 page illustration.

How it works

MCP, or Model Context Protocol, lets a tool like Claude Code connect to external capabilities as named tools. In this case, the MCP server endpoint is:

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

Claude Code talks to that server over HTTP. You provide an Ace Data Cloud API token in the authorization header, and Claude Code exposes the server as a local MCP tool provider named nanobanana.

The documented command is:

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

One small but important implementation detail: the header flag must be uppercase -H. The document explicitly warns that lowercase -h means --help, not a header parameter.

Choosing the right Claude Code scope

The command above works without an explicit scope, but the default is local, which applies only in the directory where you run the command. The document describes three scopes:

  • local — no -s or -s local; stored in ~/.claude.json; effective only in the current project directory.
  • user — -s user; stored in ~/.claude.json; available globally across projects.
  • project — -s project; stored in .mcp.json in the project root; useful for team-shared project configuration.

For a personal workstation, -s user is usually the least surprising choice. For a repository where several people should use the same MCP server definition, -s project makes the configuration visible in the project root.

If you choose the project scope, do not commit a real token to a public repository. Use an environment-variable placeholder such as ${ACE_TOKEN} in shared configuration and let each developer provide their own local environment variable.

Verify the connection before prompting

After adding the MCP server, verify the connection before spending time on image prompts:

claude mcp list

The expected result is that nanobanana appears as connected. The source document describes this as ✓ Connected. If it does not connect, check the three common setup mistakes first: the endpoint URL, the uppercase -H header flag, and whether your token was actually included in the header.

Workflow 1: generate an illustration while editing code

A straightforward use case is generating a page illustration while you are implementing the page. The document gives an example prompt for a 404 page:

Generate an illustration of a small dinosaur crouching next to a crack in the ground looking down, for use on a 404 page

That kind of prompt fits naturally into a Claude Code session: you can ask for the asset, then ask Claude to wire the resulting image into your app, update alt text, or add the image path to the relevant component.

Workflow 2: edit screenshots without leaving the terminal

The editing tool is useful when an image is almost right but needs cleanup. The document gives this example:

Edit this image to remove the text watermark in the bottom right corner, filling the background

For documentation builders, this is a practical workflow: clean a screenshot, keep the visual context, and continue writing docs or landing-page code in the same terminal-driven loop.

Workflow 3: compose multiple images

The most interesting documented capability is multi-image composition. nanobanana_edit_image supports multiple image URLs as input, and the underlying Gemini model is described as understanding relationships between images.

A prompt from the document looks like this:

Put the phone from the first image onto the desk in the second image, adjusting angle and lighting to make it look natural

This is the kind of workflow that helps when building product mockups, hero images, docs thumbnails, or interface examples. You can keep one image as the object reference, another as the environment, and ask the model to blend them with realistic lighting and perspective.

A practical setup recipe

Here is a minimal terminal-first setup you can adapt:

# Add the NanoBanana MCP server for all Claude Code projects on this machine.
claude mcp add nanobanana   -s user   --transport http   https://nanobanana.mcp.acedata.cloud/mcp   -H "Authorization: Bearer YOUR_TOKEN"

# Confirm Claude Code can see the MCP server.
claude mcp list

If you prefer project-level configuration, change -s user to -s project. That writes the configuration to .mcp.json in the project root, which can be shared with teammates. Again, keep real tokens out of public git history.

Where this fits in a builder workflow

The value of this setup is not that it replaces design judgment. It removes a context switch. You can ask Claude Code to generate a first-pass asset, edit a screenshot, or compose two reference images while you are already working on the surrounding code or documentation.

Start small: connect the MCP server, verify it with claude mcp list, then try one generation task and one edit task. Once that works, the terminal becomes a practical place to handle lightweight visual iteration.

Read the source documentation here: Claude Code integration with NanoBanana 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
Image
Nexior is an open-source project on GitHub that allows us to deploy our AI application site with one click, including AI Q&A, Midjourney drawing, knowledge base Q&A, artistic QR codes, and more. There is no need to develop AI systems, purchase AI accounts, worry about API support, or configure payment systems. It comes with zero startup costs and allows you to earn income through AI without risk. This article will introduce the deployment process of the Nexior project on Vercel. Without any programming skills, you can deploy your AI site in a few minutes and easily generate revenue. Preparation First, open the Nexior GitHub repository at: https://github.com/AceDataCloud/Nexior , then register or log in to your GitHub account. Click Fork to clone the code to your local repository, as shown below: After completing the Fork, we will get our personal repository, as shown below: In this example, the account is Germey, so we can see that we have Forked to the Germey user, wit...
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