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 building a product, documentation site, demo page, or internal tool, image work often breaks your flow: you leave the terminal, open a separate image app, upload assets, write a prompt, download the result, and then come back to your repo. NanoBanana MCP gives Claude Code a more direct path: generate or edit images from the same terminal session where you are already writing code.

What you can do

The source guide describes a Claude Code integration for NanoBanana MCP, backed by Google Gemini’s image-understanding capabilities. In practical terms, this is useful when the task is not only “make an image,” but “understand these images and transform them.” The documented examples include:

  • Composing multiple images, such as placing an object from one image into the scene of another.
  • Editing an existing image to remove unwanted text or a watermark and fill the background.
  • Generating a new illustration from text, such as a small dinosaur for a 404 page.

The MCP server exposes two tools in Claude Code: nanobanana_generate_image for text-to-image generation, and nanobanana_edit_image for image editing with support for multi-image input.

How it works

Claude Code can connect to external tools through MCP. For NanoBanana, the documented HTTP MCP endpoint is:

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

Once connected, you do not call a REST image endpoint by hand inside your app. Instead, you ask Claude Code for the image operation in natural language, and Claude Code invokes the MCP tool. That makes the workflow especially comfortable for builders who are already using Claude Code to inspect files, update UI copy, or prepare assets in a project directory.

Configure NanoBanana MCP in Claude Code

First, create or copy an Ace Data Cloud API token from the platform. Then add the MCP server to Claude Code with the command shown in the document:

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

Two details are worth calling out. The header flag must be uppercase -H; lowercase -h means help, not an HTTP header. Also, if you do not pass a scope with -s, Claude Code uses the default local scope, which applies only in the directory where the command is run.

Choose the right scope for your project

The guide documents three scopes. Use local when you only want the server available in the current project directory. Use user when you want it available across all projects. Use project when the configuration should live in the project root as .mcp.json and be shared with a team.

# Current project directory only
claude mcp add nanobanana -s local --transport http https://nanobanana.mcp.acedata.cloud/mcp   -H "Authorization: Bearer YOUR_TOKEN"

# Available across all projects for your user
claude mcp add nanobanana -s user --transport http https://nanobanana.mcp.acedata.cloud/mcp   -H "Authorization: Bearer YOUR_TOKEN"

# Project config in .mcp.json
claude mcp add nanobanana -s project --transport http https://nanobanana.mcp.acedata.cloud/mcp   -H "Authorization: Bearer YOUR_TOKEN"

If you choose the project scope, avoid committing real tokens to a public repository. The source guide recommends using ${ENV_VAR} placeholders plus environment variables instead.

Verify the connection before asking for assets

After adding the server, run:

claude mcp list

You should see nanobanana marked as ✓ Connected. This quick check saves time: if the server is not connected, your next image prompt will fail for configuration reasons rather than creative reasons.

Use it like a builder, not like a prompt gallery

The best use cases are tied to concrete work in your repository. For example, if you are building a landing page and already have product screenshots, ask Claude Code to create a hero illustration that uses those screenshots as references. If you are preparing documentation, ask for a consistent illustration that matches the section’s purpose. If an exported image has unwanted text, ask Claude Code to edit the image and fill the background naturally.

For a multi-image composition task, the natural-language request can be as specific as:

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

For cleanup, the documented style of request is:

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

And for a small UI illustration:

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

A practical workflow for product assets

  1. Keep source images in your project, or prepare stable image URLs if the tool needs URL input.
  2. Connect NanoBanana MCP with the appropriate Claude Code scope.
  3. Run claude mcp list and confirm nanobanana is connected.
  4. Ask for one asset at a time: hero image, empty state, 404 illustration, documentation graphic, or screenshot cleanup.
  5. Review the output before committing it, just as you would review generated code.

This keeps image generation close to the actual implementation work. The product naturally appears as a tool in your developer loop, not as a separate creative platform you have to context-switch into.

If you want the original setup reference, read the Ace Data Cloud documentation for 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