How to Generate and Edit Images from Claude Code with NanoBanana MCP

How to Generate and Edit Images from Claude Code with NanoBanana MCP

When you are working in the terminal, even a small visual task can break your flow: you leave Claude Code, open an image tool, upload references, copy results back, and then return to the project. NanoBanana MCP gives Claude Code a cleaner path: ask for an image generation or edit in natural language, and let the MCP server handle the visual operation from inside the same terminal session.

What you can do

The Ace Data Cloud NanoBanana MCP server exposes two practical capabilities to Claude Code:

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

The interesting part is not just that it can create images. The documentation highlights NanoBanana's ability to understand image content: for example, you can provide two images and ask it to place an object from image A into the scene of image B while adjusting angle and lighting. That makes it useful for builder workflows where the task is closer to composition than simple prompt-to-image generation.

How it works

Claude Code talks to external tools through MCP. In this setup, you register the NanoBanana MCP endpoint as an HTTP transport, pass an Ace Data Cloud API token as an authorization header, and then use Claude Code normally. Once the server is connected, your prompt can request an image task, and Claude Code can route the request to the right MCP tool.

The endpoint used by the documentation is:

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

The server is added with a bearer token header. The document is explicit about one small but easy-to-miss detail: the header flag must be uppercase -H; lowercase -h is interpreted as help.

Set up NanoBanana MCP in Claude Code

After you have an Ace Data Cloud API token, add the MCP server from your terminal. Replace YOUR_TOKEN with your actual token; do not commit it to a public repository.

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

By default, if you do not pass a scope, Claude Code uses the local scope. The documentation describes three scopes:

  • local: the default; effective only in the current project directory and stored in ~/.claude.json.
  • user: global across projects; enabled with -s user and stored in ~/.claude.json.
  • project: project-level configuration; enabled with -s project and written to .mcp.json in the project root.

For a personal setup, -s user is convenient. For a team project, -s project can make the MCP configuration shareable, but the doc warns not to commit real tokens to public repositories. Use environment-variable placeholders plus environment variables instead.

Verify the connection before using it

Once the server is registered, check that Claude Code can see it:

claude mcp list

You should see nanobanana marked as ✓ Connected. If it is not connected, the first things to check are the endpoint URL, the uppercase -H flag, and whether the authorization header was copied correctly.

Use case 1: multi-image composition

Multi-image composition is the workflow that best explains why this MCP is useful. Instead of describing every pixel from scratch, you can give Claude Code a task that depends on reference images:

Put the phone from the first image onto the desk in the second image, adjusting angle and lighting to make it look natural.

That kind of request maps to nanobanana_edit_image, because the tool supports multiple image URLs as input. In practice, this is useful for product mockups, landing-page visuals, documentation screenshots, or quick internal design drafts where the source objects already exist.

Use case 2: clean up screenshots or generated assets

The docs also describe using image editing to remove unwanted text from an image. For example:

Edit this image to remove the text watermark in the bottom right corner, filling the background.

This is a good fit for developer content workflows. You may have a screenshot, diagram, or generated asset that is almost usable but has a distracting label or watermark-like text. Keeping the edit inside Claude Code means you can iterate while you are still writing the page, README, or issue comment that needs the image.

Use case 3: generate illustrations for product pages

For simple illustration work, use the generation tool directly:

Generate an illustration of a small dinosaur crouching next to a crack in the ground looking down, for use on a 404 page.

This maps to nanobanana_generate_image. The key is to describe the target surface, not only the subject. A prompt that says “for use on a 404 page” gives the model layout context: it should be readable as an illustration, not a cinematic poster or a dense concept-art scene.

A practical workflow for builders

  1. Add the NanoBanana MCP server with claude mcp add.
  2. Confirm it appears as connected with claude mcp list.
  3. Start with a concrete output surface: README diagram, 404 illustration, product mockup, blog cover, or screenshot cleanup.
  4. Use nanobanana_generate_image when the asset starts from text.
  5. Use nanobanana_edit_image when you have one or more reference images to preserve, combine, or clean up.

The biggest benefit is not avoiding a few clicks. It is keeping visual iteration close to the code and writing work that triggered it. If your team already uses Claude Code as a development cockpit, adding NanoBanana MCP makes image generation and editing feel like another terminal-native tool rather than a separate creative pipeline.

Read the source documentation here: Claude Code integration 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
Image
Nexior is an open-source project on GitHub that allows us to deploy our AI application site with one click, including AI Q&A, Midjourney drawing, knowledge base Q&A, artistic QR codes, and more. There is no need to develop AI systems, purchase AI accounts, worry about API support, or configure payment systems. It comes with zero startup costs and allows you to earn income through AI without risk. This article will introduce the deployment process of the Nexior project on Vercel. Without any programming skills, you can deploy your AI site in a few minutes and easily generate revenue. Preparation First, open the Nexior GitHub repository at: https://github.com/AceDataCloud/Nexior , then register or log in to your GitHub account. Click Fork to clone the code to your local repository, as shown below: After completing the Fork, we will get our personal repository, as shown below: In this example, the account is Germey, so we can see that we have Forked to the Germey user, wit...
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