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

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

Image work often starts inside a code task: you need a 404 illustration, a cleaned-up screenshot, or a quick composition for a product mockup, but switching from your terminal to a separate image tool breaks the flow. NanoBanana MCP gives Claude Code a small, practical image workspace directly in the terminal.

What you can do

The Ace Data Cloud NanoBanana MCP integration exposes two tools inside Claude Code:

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

The useful part is not only that Claude can ask for an image. It is that you can describe the edit in the same working context where you are writing code, reviewing UI states, or preparing assets. The source document highlights workflows such as placing an object from one image into the scene of another, removing unwanted text from an image, and generating a page illustration for a 404 screen.

How it works

NanoBanana is exposed as a remote MCP server. Claude Code connects to that server over HTTP, and your Ace Data Cloud API token is passed as an authorization header. Once connected, Claude Code can call the MCP tools during a normal terminal session.

The server URL from the documentation is:

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

The important detail is that this is not a separate SDK you need to wire into your app. You are registering an MCP server with Claude Code, then letting Claude call the available tools when your prompt asks for image generation or editing.

Configure Claude Code

After you have an Ace Data Cloud API token, add the NanoBanana MCP server from your terminal:

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

The documentation calls out one small but easy-to-miss CLI detail: -H must be uppercase. In Claude Code, lowercase -h means --help, not a header parameter.

When you omit -s, Claude Code uses the default local scope. That means the server configuration only applies to the directory where you ran the command. For day-to-day usage, choose the scope deliberately:

  • local: no -s or -s local; written to ~/.claude.json; effective only in the current project directory.
  • user: -s user; written to ~/.claude.json; available across all projects.
  • project: -s project; written to .mcp.json in the project root; useful when the configuration should be shared with a team.

If you use -s project, be careful with secrets. The document recommends using environment-variable placeholders such as ${ENV_VAR} instead of committing real tokens to a public repository.

Verify the connection

Before asking Claude to create assets, check that the MCP server is actually connected:

claude mcp list

You should see nanobanana marked as ✓ Connected. If it is not connected, re-check the transport URL, the uppercase -H header, and the token value you supplied.

Use it for real image tasks

Once connected, you can stay inside a Claude Code session and describe what you need in natural language. For example, a multi-image composition prompt can be as direct as:

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 prompt maps naturally to nanobanana_edit_image, because the documented tool supports multiple image URLs as input and is intended for edits where the model needs to understand relationships between images.

For cleanup work, the same tool can be used with a prompt like:

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

For a generated asset, you can use a product-context prompt:

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

This is where the workflow feels builder-friendly: you can ask for a missing UI illustration, review the result, then immediately continue implementing the page that uses it.

A small team setup pattern

For a solo project, -s user is usually the least friction because the MCP server is available everywhere. For a team repo, -s project makes the dependency visible: the project root gets a .mcp.json configuration that teammates can share. Keep the configuration, but keep the token outside git by using an environment variable placeholder.

A practical setup is:

claude mcp add nanobanana -s project --transport http https://nanobanana.mcp.acedata.cloud/mcp \
  -H "Authorization: Bearer ${ACEDATA_API_TOKEN}"

Then each developer only needs to provide ACEDATA_API_TOKEN locally. The shared project still documents that image generation and image editing are part of the development workflow, without exposing credentials.

Where to go next

If your work regularly includes screenshots, mockups, empty states, or product illustrations, NanoBanana MCP is a pragmatic way to keep those edits close to the code. Start with one narrow task, verify nanobanana is connected, and use nanobanana_generate_image or nanobanana_edit_image only when the image operation is part of the build flow you are already in.

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