How to Use NanoBanana MCP from Claude Code for Practical Image Editing

How to Use NanoBanana MCP from Claude Code for Practical Image Editing

When you are already working inside a terminal, the most annoying part of making or fixing visual assets is usually the context switch: open another app, upload references, describe the edit, download the result, then wire it back into your project. The NanoBanana MCP setup lets Claude Code call image generation and image editing tools from the same terminal workflow.

What you can do

The documented NanoBanana MCP server is focused on two practical image operations inside Claude Code:

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

The key detail is that NanoBanana is designed around image understanding. The documentation describes workflows where Gemini understands relationships between images, such as taking an object from one image and placing it into the scene of another while adjusting angle and lighting. That makes it useful for builder tasks like product mockups, README illustrations, landing-page visuals, screenshot cleanup, and small design assets that would otherwise interrupt your coding loop.

How it works

Claude Code can connect to remote tools through MCP. In this case, the remote MCP endpoint is:

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

You add it to Claude Code with claude mcp add, using HTTP transport and an Authorization header. After that, Claude Code can discover and call the NanoBanana tools during a normal terminal session.

The only credential you need for this documented setup is an Ace Data Cloud API token. The docs emphasize two operational points that are easy to overlook: -H must be uppercase, because lowercase -h means help, and you should never paste a real token into public repositories, issues, screenshots, or chat logs. Use a placeholder like YOUR_ACEDATACLOUD_API_KEY when documenting the setup.

Choose the right Claude Code scope

The same MCP server can be registered with different scopes. Pick the narrowest scope that fits your workflow.

Use local for a single project trial

The local scope binds the configuration to the project directory where you run the command. Claude Code writes the record into the 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

This is the best first step if you only want to validate the workflow for one app, documentation site, or design experiment.

Use user when you want it across projects

The user scope writes a user-level configuration into ~/.claude.json. Any project opened with Claude Code afterward can see the NanoBanana MCP server.

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

This is convenient if you often create product images, article covers, screenshots, or UI concept assets while moving between repositories.

Use project for team configuration

The project scope writes the configuration into .mcp.json in the current project root. The documentation notes that this can be submitted to a private repository for teammates to reuse, but the real token should not be committed to public repositories. In practice, keep secrets local or replace them with an environment-specific placeholder.

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 configuration for the first time, it may show Pending approval. That is a normal security prompt; confirm trust inside the Claude Code session before using the server.

Verify the connection before asking for images

After adding the MCP server, run:

claude mcp list

If nanobanana shows ✓ Connected, the handshake succeeded. If it does not connect, check three things before debugging anything else: the token, the service URL, and the scope you used. The documentation also cautions against relying on historical client versions or fixed tool counts to decide whether the setup is healthy.

Turn image edits into terminal-native tasks

Once the server is connected, the interesting part is not the command itself; it is how naturally the visual task can become part of a builder workflow. For example, while working on a product page, you can ask Claude Code to compose a product object from one image into a second scene:

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 documentation cleanup, you can ask for a targeted edit instead of opening an image editor:

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

For UI states, docs, and empty pages, you can generate a simple 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.

These examples are intentionally small. They are the kinds of tasks that often block a pull request, README refresh, release note, or landing page update because nobody wants to leave the development flow for a minor visual asset.

A practical setup checklist

  1. Get an Ace Data Cloud API token and keep it private.
  2. Add the NanoBanana MCP server with claude mcp add nanobanana.
  3. Choose local, user, or project based on where the configuration should live.
  4. Run claude mcp list and confirm ✓ Connected.
  5. Start with one concrete task: compose two images, remove unwanted text, or generate a small illustration.

For me, the main benefit is not that image editing becomes magical. It is that it becomes scriptable enough to sit beside code review, documentation, and release work. If you already trust Claude Code to reason over your project, adding a focused MCP tool for visual assets can remove one more manual handoff.

Read the original setup notes in the Claude Code with Nano Banana 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