How to Add NanoBanana Image Editing to Claude Code with MCP

How to Add NanoBanana Image Editing to Claude Code with MCP

If your coding agent can edit files but still needs you to leave the terminal whenever a README image, product mockup, or visual asset changes, MCP is a clean way to close that gap.

What you can do

The NanoBanana MCP guide for Claude Code describes a focused workflow: connect Claude Code to the managed NanoBanana MCP server, then ask for image generation, image editing, or multi-image composition from the same terminal session where you are already working on code.

This is useful when the visual task is part of a developer workflow rather than a standalone design session. For example, you might be updating a landing page, writing release notes, polishing a 404 page, or preparing product screenshots. Instead of switching tools, you can let Claude Code keep project context and call the image tool when needed.

  • Generate a new image from a prompt with nanobanana_generate_image.
  • Edit an existing image with nanobanana_edit_image.
  • Pass multiple image URLs to compose or transfer objects between images.
  • Keep the configuration scoped to one project, all projects, or a shared project file.

How it works

Claude Code already understands code, files, shell commands, and error output. MCP adds callable external tools to that environment. In this case, Ace Data Cloud hosts the NanoBanana MCP endpoint, and Claude Code talks to it over HTTP with an authorization header.

The endpoint shown in the guide is:

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

The server is added with claude mcp add, the transport is http, and authentication is passed with an uppercase -H header. The documentation explicitly notes that lowercase -h is help, so keep -H uppercase.

Choose the right scope

The guide gives three configuration scopes. The right one depends on how repeatable the image workflow is.

Use local for a trial or one repository

The local scope is bound to the project directory where you run the command. Claude Code writes the record into the local ~/.claude.json with the current project path. It is a good default when you want to test the handshake without affecting every project on your machine.

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

Use user when image work is part of your daily loop

If you often need visual assets across repositories, use the user scope. The configuration is still written locally, but any project opened with Claude Code afterward can see the NanoBanana server.

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

Use project for team configuration

The project scope writes configuration into .mcp.json in the current project root. That can be useful for a private team repository where everyone needs the same MCP server name and endpoint. Do not commit real tokens to public repositories; use a placeholder or have each teammate add their own local secret. When Claude Code reads a project-level configuration for the first time, it may show Pending approval. The guide describes this as a normal trust prompt.

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

Verify the connection before asking for images

Before you build a workflow around the tool, run the MCP list command:

claude mcp list

If nanobanana shows ✓ Connected, the handshake succeeded. If it does not, check the token, the service URL, and the scope you used. The guide also warns not to judge the current state by historical client versions or fixed tool counts, because MCP clients and servers can change over time.

Practical prompts that fit developer work

Once connected, the most natural interface is not a raw API request. It is a specific instruction inside Claude Code, ideally attached to a task you are already doing.

For multi-image composition, the documented pattern is to pass multiple image URLs and let NanoBanana understand 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, the guide gives the example of removing unwanted text from an image:

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

For product or web UI work, you can ask Claude Code to generate a page illustration and then update the relevant asset reference in your project:

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 simple builder workflow

  1. Start in a feature branch where the image is needed.
  2. Add NanoBanana with -s local first, unless you already know it belongs in every project.
  3. Run claude mcp list and confirm ✓ Connected.
  4. Give Claude Code the design context: target file, existing image URL, desired dimensions, and where the asset will be used.
  5. Ask for the edit or generation, then review the result like any other generated artifact before committing.

The value is not that the terminal replaces a designer. It is that small visual tasks stop interrupting the development loop. Claude Code can keep the repository context, call nanobanana_generate_image or nanobanana_edit_image, and help you wire the output back into the project.

Read the full setup notes in the Claude Code with NanoBanana MCP guide.

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