How to Use NanoBanana MCP in Claude Code for Image Generation and Editing

How to Use NanoBanana MCP in Claude Code for Image Generation and Editing

When you are already working inside a terminal with Claude Code, the annoying part of image work is not writing the prompt. It is leaving the project context, opening a separate tool, uploading reference images, copying results back, and then explaining what changed. NanoBanana MCP gives Claude Code a small, focused image toolchain so the same coding agent can help generate, edit, and compose images from your project workflow.

What you can do

The NanoBanana MCP guide describes two tools exposed to Claude Code:

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

The practical use cases are intentionally concrete. You can ask Claude Code to generate a page illustration, remove unwanted text from an image, or combine multiple source images. The guide gives a useful example: pass two images, then ask the model to place the item from the first image into the scene of the second image while adjusting angle and lighting. That is a good fit for product mockups, docs screenshots, empty-state illustrations, and internal release materials.

How it works

Claude Code connects to NanoBanana through an MCP server URL:

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

The connection is added with claude mcp add using HTTP transport and an Authorization header. After that, Claude Code can call the image tools from a normal chat-like instruction while staying in the same project session.

The documentation is careful about token handling: examples use YOUR_ACEDATACLOUD_API_KEY, and the real token should not be pasted into public repositories, issues, screenshots, or chat logs. That matters most when you choose project-level configuration, because project settings can be shared with a repository.

Pick the right configuration scope

The guide provides three scopes: local, user, and project. The command shape is the same; only the -s value changes.

  • local: best for a trial in the current project directory. Claude Code writes the record into local ~/.claude.json with the current project path.
  • user: best when you want NanoBanana available across multiple Claude Code projects.
  • project: best for a team project. It writes to .mcp.json in the project root. The guide recommends not committing real tokens to public repositories.

One small but important detail: -H must be uppercase. Lowercase -h is interpreted as help.

Add NanoBanana MCP to the current project

For a first run, I would start with the local scope. It keeps the experiment tied to the current project and avoids making a global change before you know how the tool fits your workflow.

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

If you later want the same server available everywhere, use the documented user variant:

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

For a team repository, use 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 a project-level configuration for the first time, it may show Pending approval. The guide treats that as a normal security prompt; confirm trust in the project configuration inside the Claude Code session.

Verify the connection before asking for images

After adding the MCP server, check the handshake:

claude mcp list

If nanobanana shows ✓ Connected, the server is ready. If it fails, the guide suggests checking the token, service URL, and configuration scope. Do not debug from old screenshots or assume a fixed number of tools; verify the current connection state directly.

Use natural-language tasks, not API choreography

Once connected, the useful part is that you can describe the image operation in project language. For composition, you might write:

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, the guide gives this pattern:

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

And for a web 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.

That is the builder-friendly workflow: keep the intent close to the codebase, let Claude Code decide when to call nanobanana_generate_image or nanobanana_edit_image, then review the result like any other asset change.

Where this fits in a real project

I would use NanoBanana MCP when the image task is connected to existing project context: a README needs a diagram, a landing page needs an illustration, a release note needs a visual, or a product screenshot needs a cleaned-up variant. If you only need a one-off image, a standalone image interface may be enough. If the image depends on the repository, docs, screenshots, or a task list Claude Code is already reading, MCP is the more natural path.

For the complete setup notes and related examples, read the official 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