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 page, a docs site, or a small internal tool, the slow part is often not writing code—it is switching out of the terminal to make a visual asset, edit a screenshot, or compose two reference images into one usable result.

NanoBanana MCP gives Claude Code a direct path to image generation and image editing from the terminal. The workflow is simple: add the remote MCP server once, verify that Claude Code can connect, then ask for images or edits in the same session where you are already working on your code.

What you can do

The source document describes two NanoBanana MCP tools available inside Claude Code:

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

The practical difference is that editing is not limited to a single flat instruction. The documented workflow highlights multi-image composition: you can provide multiple image URLs and ask the model to understand the relationship between them, such as placing an object from one image into the scene of another while adjusting angle and lighting.

How it works

Claude Code connects to NanoBanana through a remote MCP endpoint:

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

Once the server is registered, Claude Code can route natural-language requests to the NanoBanana tools. You do not need to write a custom image pipeline just to test an asset idea. You describe the image operation in the terminal, and Claude Code calls the appropriate MCP tool.

The documented setup uses an Ace Data Cloud API token as a bearer token in the MCP header. Keep that token out of public repositories. If you want a team-shared project config, use an environment-variable placeholder instead of committing the real token.

Configure NanoBanana MCP in Claude Code

Run the MCP add command from the terminal and replace YOUR_TOKEN with your API token:

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

One detail matters: the documented command uses uppercase -H. Lowercase -h is interpreted as help, not as a header parameter.

By default, if you do not pass -s, Claude Code uses the local scope. The document also describes explicit scopes:

  • local: the default; effective only in the current project directory.
  • user: global for the current user, available across projects.
  • project: written to .mcp.json in the project root, useful when sharing config with a team.

For a personal setup, -s user is often convenient. For a repository workflow, -s project makes the MCP configuration visible to teammates, but the token should be supplied through an environment variable rather than committed as plain text.

Verify the connection

After adding the server, verify that Claude Code can see it:

claude mcp list

The expected result is that nanobanana appears as connected. If it does not, check the endpoint URL, the transport value, and the capitalization of the header flag before debugging anything more complicated.

Use case 1: compose multiple images

The most useful documented editing scenario is multi-image composition. For example, you might have a product photo and a desk scene, then ask Claude Code to create a believable composite:

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

This is the kind of task that is awkward to automate with traditional scripts because it depends on visual understanding: object identity, scene geometry, and lighting. With nanobanana_edit_image, the image URLs become input, and the instruction describes the transformation.

Use case 2: clean up screenshots

The document also shows image cleanup as a good fit. If a screenshot has unwanted text or a watermark in a corner, you can ask for the removal and background fill directly:

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

For builders, this is useful when preparing docs images, changelog visuals, or internal demos. You can keep the work in the same Claude Code session where you are editing the page or README that will use the image.

Use case 3: generate a docs illustration

For assets that do not start from an existing image, use nanobanana_generate_image. The source guide gives a 404-page illustration example:

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

That pattern works well for lightweight product visuals: empty states, onboarding cards, documentation covers, and prototype illustrations. The important habit is to be specific about where the image will be used, because layout context affects composition.

A simple workflow to reuse

  1. Add NanoBanana MCP with claude mcp add.
  2. Run claude mcp list and confirm nanobanana is connected.
  3. Decide whether the task is generation or editing.
  4. For editing, provide the relevant image URLs and describe the relationship between them.
  5. Use the resulting image in your docs, app mockup, or content workflow.

The nice part is not that image generation exists; it is that it becomes part of the terminal workflow. You can be working on a landing page, ask for a matching illustration, iterate on the copy, and update the file without leaving Claude Code.

For the exact setup command, scopes, and tool names, read the original Ace Data Cloud document: 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