How to Add NanoBanana Image Editing to Claude Code with MCP

How to Add NanoBanana Image Editing to Claude Code with MCP

When you are already working in a terminal, switching to a browser just to generate or edit a product image breaks flow. A practical alternative is to connect an image MCP server to Claude Code, then ask for image work in the same place where you read code, edit files, and run commands.

This guide walks through the NanoBanana MCP setup for Claude Code using the public Ace Data Cloud documentation. The goal is not to replace your design process; it is to give your coding agent a callable image tool for common builder tasks: README visuals, landing page illustrations, product mockups, and multi-image composition.

What you can do

NanoBanana is useful when the task needs image understanding, not only fresh image generation. The documentation describes it as a tool that can understand relationships across images—for example, placing an item from one image into the scene of another and adjusting angle and lighting so the result looks natural.

In Claude Code, the NanoBanana MCP server exposes two tools:

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

That makes it a good fit for terminal-driven workflows where you want Claude Code to inspect project context, propose an asset, and call the image tool without leaving the session.

How it works

The setup is an HTTP MCP connection from Claude Code to the NanoBanana MCP endpoint:

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

Claude Code stores the MCP configuration locally, depending on the scope you choose. Requests include an authorization header in this form:

Authorization: Bearer YOUR_ACEDATACLOUD_API_KEY

The documentation is careful about token handling: use a masked placeholder such as YOUR_ACEDATACLOUD_API_KEY in examples, screenshots, issues, and public repositories. Keep the real token in local configuration or a private environment-specific setup.

Choose the right Claude Code scope

Claude Code supports three setup scopes for this MCP server. The command shape is the same, but the final -s value changes how widely the configuration applies.

Project-only setup with local

Use local when you only want to test NanoBanana in the current project directory. The documentation says Claude Code writes this record into local ~/.claude.json along with the current project path.

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

User-wide setup with user

Use user if you expect to use image generation and editing across many projects. After this is configured, projects opened with Claude Code can see the NanoBanana MCP server.

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

Team-shared setup with project

Use project for a team repository. Claude Code writes the configuration into .mcp.json in the project root. The important caveat is that a real token should not be committed to a public repository. In a private team workflow, prefer a placeholder or have each developer add their own local credential.

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

One small but easy-to-miss detail: the header flag is uppercase -H. The lowercase -h is --help, so it will not configure the authorization header.

Verify the connection before asking for image work

After adding the MCP server, verify the handshake:

claude mcp list

If nanobanana shows ✓ Connected, the connection is ready. If it does not, check three things before debugging anything else: the token, the service URL, and the chosen configuration scope.

For project-level configuration, Claude Code may show Pending approval when it first reads the project configuration. That is a normal security step: approve the project configuration inside the Claude Code session before expecting tool calls to work.

Practical prompts to try

Once the server is connected, you can ask Claude Code for image tasks in normal language. Keep the prompt concrete and provide the image URLs when you want editing or composition.

For multi-image composition:

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 tasks:

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

For project illustrations:

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

These examples point to a useful pattern: let Claude Code stay responsible for your project context, naming, and file placement, while NanoBanana handles the image operation through MCP.

A simple builder workflow

  1. Open the project in Claude Code.
  2. Add NanoBanana with -s local for a first test.
  3. Run claude mcp list and confirm ✓ Connected.
  4. Ask Claude Code to generate or edit a specific asset for your README, 404 page, or landing page.
  5. If the workflow becomes part of your daily setup, switch to -s user; if it belongs to a private team project, consider -s project with a safe token strategy.

The nice thing about this setup is that it keeps image work close to the code. You can ask for a visual, review the result, and then have Claude Code update the relevant project files without turning the task into a browser-copy-paste loop.

For the full configuration reference and related examples, read the Ace Data Cloud documentation: 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