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

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

If your design workflow already starts in a terminal, switching to a separate image tool just to generate an illustration or clean up a screenshot can feel like unnecessary context switching. NanoBanana MCP gives Claude Code a small, focused image workflow: generate an image from text, or edit one or more existing images, without leaving the project where you are writing code.

What you can do

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

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

The practical value is not only “make me a picture.” The source guide describes NanoBanana as image-aware: you can provide multiple images and ask it to understand the relationship between them. For example, it can take an object from one image and place it into the scene of another, while adjusting angle and lighting so the result feels natural.

How it works

Claude Code can connect to remote MCP servers over HTTP. For NanoBanana, the server endpoint in the documentation is:

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

You add that server to Claude Code with an authorization header. Once connected, Claude Code can call the NanoBanana tools from a normal coding session. That means you can ask for a 404 illustration while building a web app, remove unwanted text from a screenshot while preparing docs, or combine two product images while drafting a landing page.

The documented setup command is:

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

One important detail from the guide: -H must be uppercase. In Claude Code, lowercase -h is interpreted as help, not as a header flag.

Choose the right scope

Claude Code supports different MCP configuration scopes. The default behavior without -s is local, which applies only to the directory where you run the command. The guide recommends being explicit because the scope affects whether the server is available only in the current project, across your user account, or in a project configuration file.

  • local: default; effective only in the current project directory and stored in ~/.claude.json.
  • user: configured with -s user; available globally in all projects and stored in ~/.claude.json.
  • project: configured with -s project; written to .mcp.json in the project root so the configuration can be shared with the team.

For a personal setup, -s user is usually convenient. For a team repository, -s project can make sense, but do not commit real tokens to a public repository. The documentation suggests using environment-variable placeholders such as ${ENV_VAR} instead.

Verify the connection

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

claude mcp list

The expected result is that nanobanana appears as connected. At that point, you do not need to memorize a separate API shape for everyday use. You can describe the intended edit or generation goal in natural language, and Claude Code can route the request to the MCP tool.

Three useful workflows

1. Compose two images

Multi-image editing is the most interesting capability in the guide. A request can describe how two inputs should relate to each other:

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 useful for product mockups, internal demos, and UI storytelling where you already have source assets but need a coherent scene.

2. Clean up screenshots

The guide also gives a screenshot cleanup use case: remove unwanted text or a watermark-like element from a corner and fill the background. A prompt can stay direct:

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

For technical writing, this is handy when a screenshot contains a temporary annotation, placeholder text, or a small visual distraction that does not belong in the final documentation.

3. Generate small product illustrations

For frontend projects, a small illustration can make an empty state or error page feel more intentional. The documented example is:

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

Because this runs inside Claude Code, the request can sit next to the implementation task: build the page, create the illustration, then wire the asset into the app.

A practical setup pattern

For a project-level workflow, I would keep the MCP server configuration close to the repository but keep secrets outside git. The operational pattern is:

  1. Add the NanoBanana MCP server with the documented HTTP endpoint.
  2. Use an authorization header with a token value stored outside the committed config.
  3. Run claude mcp list before relying on the tool in a work session.
  4. Use nanobanana_generate_image for new assets and nanobanana_edit_image when existing images need to be transformed or combined.

That gives you a simple builder-friendly loop: stay in the terminal, describe the image task in the same place you describe code changes, and keep the resulting asset work attached to the project context.

Read the full setup notes in the Claude Code integration with NanoBanana MCP documentation.

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