{"slug": "a-practical-guide-to-adding-nano-banana-image-tools-to-claude-desktop-vs-code", "title": "A Practical Guide to Adding Nano Banana Image Tools to Claude Desktop, VS Code, and Cursor", "summary": "Ace Data Cloud's Nano Banana MCP server connects image generation and editing tools to AI clients such as Claude Desktop, VS Code, and Cursor, enabling assistants to create and refine images directly within a coding environment. The server supports the nano-banana, nano-banana-2, and nano-banana-pro models, and requires an ACEDATACLOUD_API_TOKEN for authentication. Installation and configuration steps are documented for each client, emphasizing secure token handling.", "body_md": "If your coding assistant can already read files, run commands, and reason about a project, the next useful step is often visual: generating mockups, editing product shots, or iterating on image assets without leaving the IDE.\n\nNano Banana MCP is an MCP server for connecting image generation and image editing tools to AI clients such as Claude Desktop, VS Code, and Cursor. Once it is configured, the assistant can call a small set of image-focused tools during a normal conversation instead of forcing you to switch to a separate image UI.\n\nThe documented tool surface is intentionally compact:\n\n`nanobanana_generate_image`\n\n— generate images from text prompts`nanobanana_edit_image`\n\n— edit or combine existing images`nanobanana_get_task`\n\n— query the status of one task`nanobanana_get_tasks_batch`\n\n— query multiple task statusesThe server supports the `nano-banana`\n\n, `nano-banana-2`\n\n, and `nano-banana-pro`\n\nmodels. That makes it a good fit for builder workflows where you want to move from a text idea to an image, then keep refining that image in the same chat.\n\nTypical examples from the integration guide include prompts like:\n\nThose examples are useful because they show the real shape of the workflow: the user describes the image task in natural language, and the MCP client routes the request to the available Nano Banana tool.\n\nMCP, or Model Context Protocol, gives AI clients a standard way to call external tools. In this setup, the local MCP server is `mcp-nanobanana-pro`\n\n. Your client starts that command, passes an Ace Data Cloud token through the `ACEDATACLOUD_API_TOKEN`\n\nenvironment variable, and then exposes the Nano Banana tools to the assistant.\n\nThe basic installation path is:\n\n```\npip install mcp-nanobanana-pro\n```\n\nIf you prefer installing from source, the documented path is:\n\n```\ngit clone https://github.com/AceDataCloud/NanoBananaMCP.git\ncd NanoBananaMCP\npip install -e .\n```\n\nAfter installation, the command your client needs to run is:\n\n```\nmcp-nanobanana-pro\n```\n\nThe important thing is not to hard-code secrets in prompts or project files you plan to commit. Treat `ACEDATACLOUD_API_TOKEN`\n\nlike any other API token: keep it local, rotate it if needed, and avoid pasting it into public issues or screenshots.\n\nFor Claude Desktop, edit the client configuration file. The documented locations are:\n\n`~/Library/Application Support/Claude/claude_desktop_config.json`\n\n`%APPDATA%\\\\Claude\\\\claude_desktop_config.json`\n\nAdd an MCP server named `nanobanana`\n\n:\n\n```\n{\n  \"mcpServers\": {\n    \"nanobanana\": {\n      \"command\": \"mcp-nanobanana-pro\",\n      \"env\": {\n        \"ACEDATACLOUD_API_TOKEN\": \"Your API Token\"\n      }\n    }\n  }\n}\n```\n\nIf you use `uvx`\n\nand do not want to install the package in advance, the guide also documents this version:\n\n```\n{\n  \"mcpServers\": {\n    \"nanobanana\": {\n      \"command\": \"uvx\",\n      \"args\": [\"mcp-nanobanana-pro\"],\n      \"env\": {\n        \"ACEDATACLOUD_API_TOKEN\": \"Your API Token\"\n      }\n    }\n  }\n}\n```\n\nSave the file, restart Claude Desktop, and start with a small request. For example, ask it to generate a simple icon concept or edit one existing image. A small first test makes it easier to verify that the server starts correctly and that the token is available to the process.\n\nFor VS Code and Cursor, create `.vscode/mcp.json`\n\nin the project root:\n\n```\n{\n  \"servers\": {\n    \"nanobanana\": {\n      \"command\": \"mcp-nanobanana-pro\",\n      \"env\": {\n        \"ACEDATACLOUD_API_TOKEN\": \"Your API Token\"\n      }\n    }\n  }\n}\n```\n\nThe `uvx`\n\nversion is similar:\n\n```\n{\n  \"servers\": {\n    \"nanobanana\": {\n      \"command\": \"uvx\",\n      \"args\": [\"mcp-nanobanana-pro\"],\n      \"env\": {\n        \"ACEDATACLOUD_API_TOKEN\": \"Your API Token\"\n      }\n    }\n  }\n}\n```\n\nThis project-level setup is nice when the visual workflow belongs to a specific repository. For example, a frontend repo might use it for hero image drafts, empty-state illustrations, or product-placement experiments. A docs repo might use it to generate tutorial covers and diagrams. Because the MCP config lives with the workspace, the assistant has the right tool available where the work happens.\n\nHere is a simple builder-oriented loop:\n\n`nanobanana_generate_image`\n\n.`nanobanana_edit_image`\n\n.`nanobanana_get_task`\n\nif the client needs to check task progress.For example, in a product UI project you might say:\n\nGenerate a clean dashboard illustration for a dark-mode SaaS landing page. Use a minimal terminal panel, API cards, and a blue/green accent palette.\n\nThen follow up with:\n\nEdit the image so the API cards are less crowded and the terminal panel is more prominent.\n\nThat is where MCP feels useful: the same assistant that understands your implementation context can also help you iterate on visual assets.\n\nNano Banana MCP is not a replacement for design judgment, but it is a practical way to bring image generation and editing closer to where builders already work: Claude Desktop, VS Code, and Cursor. Start with a narrow use case, keep prompts specific, and treat the generated output as a draft you can refine.\n\nThe full setup reference is in the Ace Data Cloud Nano Banana MCP documentation: [https://platform.acedata.cloud/documents/nano-banana-mcp](https://platform.acedata.cloud/documents/nano-banana-mcp)", "url": "https://wpnews.pro/news/a-practical-guide-to-adding-nano-banana-image-tools-to-claude-desktop-vs-code", "canonical_source": "https://dev.to/germey/a-practical-guide-to-adding-nano-banana-image-tools-to-claude-desktop-vs-code-and-cursor-1ilm", "published_at": "2026-08-10 01:04:13+00:00", "updated_at": "2026-08-10 01:16:12.197468+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "generative-ai"], "entities": ["Ace Data Cloud", "Nano Banana MCP", "Claude Desktop", "VS Code", "Cursor", "mcp-nanobanana-pro", "ACEDATACLOUD_API_TOKEN"], "alternates": {"html": "https://wpnews.pro/news/a-practical-guide-to-adding-nano-banana-image-tools-to-claude-desktop-vs-code", "markdown": "https://wpnews.pro/news/a-practical-guide-to-adding-nano-banana-image-tools-to-claude-desktop-vs-code.md", "text": "https://wpnews.pro/news/a-practical-guide-to-adding-nano-banana-image-tools-to-claude-desktop-vs-code.txt", "jsonld": "https://wpnews.pro/news/a-practical-guide-to-adding-nano-banana-image-tools-to-claude-desktop-vs-code.jsonld"}}