How to Use NanoBanana MCP Inside Claude Code

How to Use NanoBanana MCP Inside Claude Code

When you are building inside a terminal, the awkward part of AI image work is usually not the prompt. It is the context switching: copy an image URL, open a separate tool, run an edit, bring the result back, and then continue writing or coding. The NanoBanana MCP setup for Claude Code is useful because it keeps image generation and image editing inside the same terminal workflow.

What you can do

The Ace Data Cloud NanoBanana MCP server gives Claude Code two direct image tools:

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

The practical difference is that NanoBanana is designed around image understanding, not only drawing from a blank prompt. The source documentation describes using Google Gemini at the core, so the workflow is especially helpful when Claude Code needs to reason about existing images: placing an object from one image into another scene, removing text from a screenshot, or creating a page illustration from a short description.

How it works

MCP, or Model Context Protocol, lets Claude Code call external tools from a running terminal session. In this setup, Claude Code connects over HTTP to the hosted NanoBanana MCP endpoint:

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

Authentication is passed with an Authorization header. The documentation shows a placeholder token format and explicitly recommends not pasting a complete token into public repositories, issues, screenshots, or chat records. Use a masked placeholder such as YOUR_ACEDATACLOUD_API_KEY in docs and examples, and keep the real token local.

Step 1: Add the MCP server to Claude Code

The core command is claude mcp add. One easy way to test is to bind the server to the current project only with the local scope:

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

Two details are worth getting right. First, -H must be uppercase; lowercase -h is the help flag. Second, choose the scope intentionally:

  • -s local: good for a trial inside one project directory.
  • -s user: useful when you want NanoBanana available across projects.
  • -s project: writes project-level configuration into .mcp.json so a team can share the setup pattern.

If you use -s project, do not commit a real token to a public repository. The documentation recommends using a placeholder or having each teammate add credentials locally. Claude Code may also show Pending approval the first time it reads a project-level MCP configuration; that is a normal trust prompt.

Step 2: Verify the connection

After adding the server, check the MCP list:

claude mcp list

If nanobanana appears with ✓ Connected, the handshake worked. If it does not, debug the three things the documentation calls out: token, service URL, and configuration scope. Avoid assuming a fixed tool count from an older client version; the reliable signal is the current connection status.

Step 3: Use it for real builder workflows

Once connected, you do not have to hand-write a tool call. Ask Claude Code in natural language, and it can choose the NanoBanana tool based on the task.

Compose two images

For product mockups or design iteration, the most useful pattern is multi-image composition. For example:

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 maps to the documented nanobanana_edit_image capability, which supports multiple image URLs and lets the model reason about the relationship between images.

Clean up screenshots or assets

If you have a screenshot with unwanted text, you can keep the request direct:

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

This is useful when preparing documentation images, release notes, or internal demos. The important habit is to describe what should change and what should stay unchanged.

Generate small illustrations while writing

For lightweight UI states, you can ask for a generated image without leaving Claude Code:

Generate an illustration of a small dinosaur squatting next to a crack in the ground looking down, to be used for a 404 page.

That kind of request fits nanobanana_generate_image: no source image is required, just a concrete visual description and the intended use.

A practical way to adopt it

Start with -s local in a disposable project and verify that claude mcp list shows ✓ Connected. Then try one edit with two image URLs and one text-to-image illustration. If the workflow becomes part of your daily documentation or product work, move the configuration to -s user. For teams, use -s project only after you have agreed on a safe token-handling pattern.

The full source guide is 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