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

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

If you already live in the terminal while building, the awkward part of making product visuals is usually not the prompt writing — it is leaving your coding flow, uploading images somewhere else, copying results back, and trying to keep context intact.

NanoBanana MCP gives Claude Code a direct tool path for image generation, image editing, and multi-image composition. In practice, that means you can ask Claude Code to create a 404 illustration, remove unwanted text from a screenshot, or combine the object from one image with the scene from another without switching out of the project context.

What you can do

The Ace Data Cloud NanoBanana MCP document describes two callable tools inside Claude Code:

  • nanobanana_generate_image — text-to-image generation.
  • nanobanana_edit_image — image editing, including multiple image input.

The most useful part for builders is the editing workflow. NanoBanana is described as understanding image content well enough to reason about relationships between inputs. For example, you can provide two images and ask it to place an item from image A into the scene from image B, while adjusting angle and lighting so the result looks natural.

How it works

Claude Code supports MCP servers over HTTP. Once the NanoBanana MCP server is registered, Claude Code can keep working from the terminal while calling the remote image tools when the task requires them.

The documented server URL is:

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

Authentication uses an Ace Data Cloud API token passed as an HTTP authorization header. The document is explicit about token hygiene: examples should use a masked placeholder such as YOUR_ACEDATACLOUD_API_KEY, and real tokens should not be pasted into public repositories, issues, screenshots, or chat records.

Choose the right Claude Code scope

The same MCP server can be added with three different Claude Code scopes. The choice is less about NanoBanana itself and more about how widely you want the configuration to apply.

  • local: use this for a single project or a quick trial. Claude Code writes the record into local configuration together with the current project path.
  • user: use this when you want NanoBanana available across projects opened with Claude Code.
  • project: use this for a team project. Claude Code writes configuration into .mcp.json in the project root. Do not commit a real token to a public repository; use a placeholder or have each teammate add their own token locally.

Add NanoBanana MCP to the current project

For a first test, I would start with the local scope. It limits the configuration to the project you are currently working in and keeps the experiment contained.

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

Two small details matter here. First, -H must be uppercase because lowercase -h is help. Second, replace only the token placeholder after Authorization: Bearer; keep the header format intact.

If you later decide this should be available everywhere, use the same command with -s user:

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

For shared project configuration, use -s project:

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 project-level MCP configuration for the first time, it may show Pending approval. The document treats this as a normal security prompt; confirm trust inside the Claude Code session if the project configuration is expected.

Verify the connection before asking for images

Before you rely on the tools in a workflow, run:

claude mcp list

A healthy setup should show nanobanana with ✓ Connected. If it does not, debug the simple things first: the token, the service URL, and the selected configuration scope. The document also warns not to judge the current state by old client versions or fixed tool counts.

Use it in real builder workflows

Once connected, you do not need to call the tool names manually every time. You can describe the intent in natural language and let Claude Code choose the appropriate NanoBanana tool.

Compose product images

For product mockups, the multi-image behavior is the most interesting path. A prompt from the document looks like this:

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

This is useful when you have a clean object shot and a target environment, such as a desk, landing-page hero scene, or app showcase background.

Clean up screenshots

For documentation and release notes, screenshots often contain distracting text, watermarks, or UI fragments. The documented workflow is direct:

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

That kind of request fits naturally after Claude Code has helped update a README, write a changelog, or prepare a blog post.

Generate small page illustrations

NanoBanana can also be used when no source image is needed. For example, the document suggests generating a 404 page illustration:

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 important habit is to keep the prompt tied to the UI context: where the image will appear, what mood it should carry, and what constraints matter for the page.

A practical first run

Here is a minimal sequence I would use in a real project:

  1. Add the server with -s local.
  2. Run claude mcp list and confirm ✓ Connected.
  3. Open the page or README where the visual will be used.
  4. Ask Claude Code for one concrete asset, such as a 404 illustration or a cleaned screenshot.
  5. Review the output and keep the generated asset with the project files or your publishing workflow.

The setup is small, but the shift is meaningful: image work becomes another terminal-native step in the same builder loop. Start with a local configuration, verify the connection, and try one narrow image-editing task before making it part of a larger content or UI workflow.

Read the full Ace Data Cloud documentation here: Claude Code 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

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