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 development workflow already lives in the terminal, switching to a browser just to create a small product illustration, edit a screenshot, or combine two reference images can feel surprisingly expensive. The useful part of MCP is that it lets tools appear inside the assistant you are already using. In this guide, we will wire NanoBanana MCP into Claude Code and use it as a terminal-native image generation and editing tool.

This is not a design-system replacement or a promise that one prompt fixes every image. The practical goal is narrower: give Claude Code access to two concrete tools, nanobanana_generate_image and nanobanana_edit_image, so you can ask for visual assets while staying in the project context.

What you can do

The NanoBanana MCP document describes two supported tools:

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

The interesting bit is multi-image composition. The guide notes that NanoBanana is backed by Google's Gemini model and is designed to understand image content. That means you can provide two images and ask it to place an object from one image into the scene of another, while adjusting angle and lighting so the result looks natural.

For builders, this makes a few everyday tasks easier: generating a 404-page illustration, cleaning up unwanted text in a screenshot, producing quick blog graphics, or composing a realistic product mockup from existing assets.

How it works

Claude Code supports MCP servers that are added from the terminal. NanoBanana MCP is exposed over HTTP at:

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

You authenticate the MCP server with an Ace Data Cloud API token in the Authorization header. Once configured, Claude Code can list the MCP server and use the NanoBanana tools during a normal coding session.

The configuration command from the document is:

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

One small but important detail: the document explicitly warns that -H must be uppercase. A lowercase -h is interpreted as --help, not as a header parameter.

Choose the right Claude Code scope

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

  • local: the default; effective only in the current project directory.
  • user: global effect, available in all projects.
  • project: writes configuration to .mcp.json in the project root, so it can be shared with a team.

For a personal machine, -s user is convenient because you do not need to re-add the same MCP server in every repository:

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

For a team repository, -s project is more deliberate because the MCP configuration can live with the project. The document also gives the key security rule: do not commit real tokens to public repositories. Use environment-variable placeholders such as ${ENV_VAR} and provide the actual value through your shell or deployment environment.

Verify the connection before prompting

After adding the server, check whether Claude Code sees it:

claude mcp list

The expected state is that nanobanana appears as ✓ Connected. I like doing this before writing any image prompt because it separates configuration problems from prompt problems. If the server is not connected, fix the token, header syntax, or scope first; do not waste time rewriting the image request.

Use case 1: generate a simple page illustration

Once the MCP server is connected, you can use natural language inside Claude Code. For example, the document gives this kind of prompt for a 404 page:

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

In a real workflow, I would add project context around that prompt: the page background color, whether the site uses rounded cards, and the target aspect ratio. The supported capability is still text-to-image generation through nanobanana_generate_image; the value comes from keeping the request next to the code where the asset will be used.

Use case 2: edit screenshots without leaving the terminal

The editing tool is useful for small cleanup tasks. The document specifically mentions removing unwanted text or a watermark from an image and filling the background:

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

That kind of operation is common when preparing documentation screenshots. You may need to remove a temporary label, redact a piece of UI text, or clean up a background region before publishing. The key is to describe the edit, the target region, and the desired fill behavior clearly.

Use case 3: compose two images into one scene

The most distinctive workflow in the document is multi-image composition. nanobanana_edit_image supports multiple image URLs as input, and Gemini understands relationships between images. A practical prompt from the guide is:

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 when you already have product photos, UI screenshots, or brand assets and want a realistic combined image. Instead of describing every object from scratch, you provide references and ask the model to perform a targeted edit.

A compact setup checklist

  1. Copy your Ace Data Cloud API token from the platform homepage.
  2. Add the MCP server with claude mcp add nanobanana --transport http.
  3. Use the endpoint https://nanobanana.mcp.acedata.cloud/mcp.
  4. Pass authentication with uppercase -H "Authorization: Bearer YOUR_TOKEN".
  5. Pick local, user, or project scope intentionally.
  6. Run claude mcp list and confirm nanobanana is ✓ Connected.

That is enough to start using image generation and image editing from inside Claude Code. The important habit is to keep prompts tied to concrete project needs: a page illustration, a cleaned-up screenshot, or a composed product mockup. For the original setup notes and examples, see the Claude Code integration with NanoBanana MCP guide.

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

零成本 AI 副业：加入 Ace Data Cloud 创收联盟，用一条链接持续获得佣金

Image
AI 的浪潮已经来了。有人还在观望，有人已经通过工具、内容和分销拿到了第一桶金。 创收联盟 是 Ace Data Cloud 为普通人准备的 AI 副业入口：不需要懂技术，不需要囤货，也不需要前期投入。你只需要把正在使用的 AI 工具分享给可能需要的人。用户通过你的专属链接注册后，会永久绑定到你的名下；他之后每一笔真实消费，你都可以按比例获得现金佣金，并支持提现。 这不是“拉人头”，而是 Stripe、AWS、Shopify 等 SaaS 公司长期采用的标准联盟营销模式（Affiliate）。佣金来自用户真实的 AI 服务消费，没有入门费、没有锁定期。 先看一组真实数据 已有推广伙伴在分销��台跑出了不错的成绩： 推荐订单总金额超过 90 万元 累计佣金奖励超过 16.8 万元 邀请用户超过 3200 人 当然，每个人的结果会因为渠道、内容、执行力不同而有差异。但至少可以说明：这条路是跑得通的，而且现在入场还很早。 为什么这件事适合新手？ 零成本、低风险： 不压货、不备货、不承担售后，注册和推广都免费。 长期收益： 客户永久绑定到你名下，后续持续消费都能给你带来分成。 平台负责交付： 技术、产品、支付、风控、客服由平台处理，你专注推广和内容分发。 可面向全球： 支持全球收款与多币种自动结算，可以面向海外用户推广。 不懂代码也能做： 可以直接推广可视化 AI 网页 studio.acedata.cloud 给普通用户。 Ace Data Cloud 是什么？ Ace Data Cloud 是一个面向全球的 AI 基础设施平台，既服务开发者和企业，也服务普通个人用户。你可以推广的入口主要有三类。 1. 面向开发者的 API 平台 平台提供多种 AI 能力，包括 AI 问答、AI 图片、AI 音乐、AI 视频、HTTP 代理、数据集等服务，覆盖 OpenAI、Claude、Gemini、DeepSeek、Grok、Midjourney、Flux、Seedream、NanoBanana、Suno、Sora、Veo、Luma、Kling、Hailuo、Seedance 等常用模型与能力。 查看服务与文档： https://platform.acedata....
Read more