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

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

Image tasks often start in code but end in a browser tab: you write the page, realize the empty state needs an illustration, export a screenshot, open a separate AI image tool, copy prompts around, and then return to the terminal. NanoBanana MCP gives Claude Code a more direct path: keep the conversation in your project, call image generation or image editing through MCP, and let the assistant use your surrounding code context when planning the asset.

What you can do

The NanoBanana MCP guide focuses on a small, practical tool surface rather than a large API catalog. In Claude Code, the server exposes two tools:

  • nanobanana_generate_image for text-to-image generation.
  • nanobanana_edit_image for image editing, including workflows that pass multiple image URLs.

That makes it a good fit for builder workflows where the goal is not “make art in isolation,” but “create or adjust the asset that belongs in this product.” The documented examples include composing an object from one image into the scene of another, removing an unwanted text watermark from an image by filling the background, and generating a 404-page illustration.

How it works

NanoBanana MCP is configured as a remote MCP server for Claude Code. The server URL is:

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

Authentication is passed as an HTTP header when you add the MCP server. The docs are explicit about one operational detail that is easy to miss: the header flag must be uppercase -H. A lowercase -h is interpreted as --help by the CLI.

You also choose a configuration scope. Use local for the current project, user when you want the same MCP server available across projects, and project when a team project should carry the MCP configuration in its project root. If you use project scope, the guide notes that Claude Code may show Pending approval the first time it reads the project-level configuration, and you need to trust that project configuration inside the Claude Code session.

Configure it for one project

For a first test, I would start with local. It keeps the configuration tied to the project directory where you run the command, which is useful when you are experimenting with a single repository.

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

Keep the real token out of screenshots, public repositories, issue comments, and chat transcripts. Use a placeholder such as YOUR_ACEDATACLOUD_API_KEY in any shared documentation.

Make it available across projects

If image generation or image editing becomes part of your daily workflow, use the user scope. The command shape is 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 user

This is useful when you move between several frontend or documentation repositories and want Claude Code to see the same NanoBanana MCP server wherever you work.

Share a project-level configuration carefully

The project scope is meant for team projects. According to the guide, Claude Code writes this configuration into the project’s .mcp.json. That can be helpful for a private repository where the team wants a consistent MCP setup, but the token should not be committed as a real secret. Prefer an environment-variable placeholder or ask each teammate to add their own token locally.

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

Verify the connection

After adding the server, check whether Claude Code can reach it:

claude mcp list

If nanobanana shows ✓ Connected, the MCP handshake worked. If it does not, debug the three inputs that actually appear in the setup path: the token, the service URL, and the chosen configuration scope.

Try a real editing workflow

The most interesting part of NanoBanana is not only generating an image from text. The guide highlights multi-image editing: Claude Code can pass multiple image URLs to nanobanana_edit_image, and the model is expected to understand relationships between images. A practical product-design prompt could be:

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 UI documentation, the generation tool can fill small but persistent gaps. For example, while editing a 404 page, you might ask:

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 builder advantage is context. Claude Code already knows the file you are editing, the dimensions your component expects, and the tone of the product page. MCP turns the image step into another callable action in the same workflow rather than a disconnected side quest.

A few guardrails

  • Use local first when evaluating the setup.
  • Do not paste a real API token into public examples.
  • Use project only when the repository and team workflow are appropriate for shared MCP configuration.
  • When connection checks fail, verify the token, https://nanobanana.mcp.acedata.cloud/mcp, and the scope before changing anything else.

If your workflow frequently crosses from code into product visuals, NanoBanana MCP is a clean way to keep that loop inside Claude Code: configure the server, verify it with claude mcp list, then use generation or multi-image editing where the project actually needs it. The full setup notes are 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