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

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

When you are already working inside Claude Code, the awkward part of making project visuals is not usually the prompt writing — it is leaving the terminal, opening a separate image tool, uploading files, copying results back, and then trying to keep the workflow reproducible.

The NanoBanana MCP guide from Ace Data Cloud shows a more builder-friendly path: connect NanoBanana as a remote MCP server, then ask Claude Code to generate, edit, or compose images directly from the same terminal session where you are reading code, writing docs, or preparing release material.

What you can do

NanoBanana is positioned in the documentation as an image model workflow with strong image understanding. Instead of treating every request as a blank text-to-image job, it can understand relationships between images. A typical composition task from the guide is: take the phone from one image, place it onto the desk in another image, and adjust angle and lighting so the result looks natural.

Once connected to Claude Code, the documented MCP server exposes two tools:

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

That makes it useful for everyday development-adjacent tasks: README illustrations, 404 page graphics, product mockups, background cleanup, or combining screenshots and assets into a single visual.

How it works

The integration uses Claude Code's MCP support over HTTP. You add a remote MCP server named nanobanana, point it at the documented endpoint https://nanobanana.mcp.acedata.cloud/mcp, and pass your Ace Data Cloud API token with an Authorization header.

The guide is careful about token hygiene. Examples use a placeholder such as YOUR_ACEDATACLOUD_API_KEY, and the real token should stay in your local configuration, private environment, or another non-public secret store. Do not paste a live token into screenshots, public repositories, issues, or shared chat logs.

Choose the right Claude Code scope

The main setup decision is the -s scope. The documentation gives three options, and the best choice depends on how you work.

Use local for a single project trial

The local scope is bound to the project directory where you run the command. Claude Code writes the record into the local ~/.claude.json together with the current project path. This is a good first step when you only want to test whether the image workflow belongs in one repository.

Use user when you want it everywhere

The user scope is also written into ~/.claude.json, but at user level. After that, projects opened with Claude Code can see the NanoBanana MCP configuration. If you frequently prepare docs, demos, or product visuals across multiple repositories, this is the most convenient option.

Use project for team configuration

The project scope writes configuration into .mcp.json in the current project root. That can be useful for private team repositories, but the guide warns against committing a real token to public repositories. A safer pattern is to commit only a placeholder and let each teammate add their own token locally or through an environment variable.

Set it up from the terminal

Here is the documented command shape for a project-local setup. Notice that -H is uppercase. The guide explicitly calls out that lowercase -h is --help, so a small typo can turn a configuration command into a help screen.

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

For a user-level configuration, keep the same endpoint and header, but change the scope:

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

For a project-shared configuration, use:

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, the guide notes that it may show Pending approval. That is a normal trust prompt for project configuration, not necessarily a connection failure.

Verify the connection before asking for images

Before you ask Claude Code to edit assets, verify the MCP handshake:

claude mcp list

If nanobanana shows ✓ Connected, the server is reachable and Claude Code can call the tools. If it fails, the documented checklist is straightforward: check the token, the service URL, and the configuration scope. The guide also recommends not relying on historical client versions or fixed tool counts to judge the current status.

Practical prompts to try

After the connection is working, the most useful shift is that you can describe visual work in normal language while staying inside the coding flow. For composition, the guide's example is:

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, you can ask it to remove unwanted text from an image and fill the area with the background:

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

For page artwork, you can generate a small illustration directly from a product need:

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

My preferred workflow is to keep these prompts close to the code or documentation they support. For example, when updating a 404 page, ask Claude Code to inspect the route, understand the visual tone of the app, and then call nanobanana_generate_image or nanobanana_edit_image with that context. The image task becomes part of the same implementation loop instead of a separate design errand.

A small builder checklist

  • Start with -s local unless you already know you want the server globally.
  • Keep the real token out of public files and screenshots.
  • Run claude mcp list before debugging prompts.
  • Use nanobanana_edit_image when the task depends on one or more existing images.
  • Use nanobanana_generate_image when the task is a fresh illustration.

The nice part is not that an image model exists; it is that the image model becomes available where builders already make decisions: inside the terminal, alongside code, docs, and project context. For the full setup notes and related MCP links, read the Ace Data Cloud document: Claude Code with Nano Banana 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