Gemini CLI 安装 Nano Banana 扩展生成图片教程

Nano Banana扩展为Gemini CLI添加AI图像生成能力,实现图片生成到代码集成的自动化。
本文介绍了Gemini CLI的Nano Banana扩展,它通过MCP协议为CLI添加AI图像生成能力。文章详细讲解了安装配置流程(全局安装、API密钥配置),演示了使用/generate等命令为网页生成食物组合图片并自动集成到代码中的实战案例。每张图片成本约15-25美分。最后作者建议开发者不要过度依赖AI,应保持主动参与和代码审查。
在 Gemini CLI 系列教程的第十课中,我们将探索一个非常实用的扩展——Nano Banana。这个扩展让 Gemini CLI 具备了 AI 图像生成能力,通过简单的命令就能生成各种类型的图片,包括普通图像、图表、图标等。本文将详细介绍从安装配置到实际使用的完整流程。
安装 Nano Banana 扩展
在扩展市场中查找并安装
Nano Banana 是一个 Gemini CLI 的第三方扩展,可以在扩展市场中搜索到。安装步骤非常简单:
- 在扩展页面找到 Nano Banana 扩展
- 复制页面上提供的安装命令
- 在终端中执行该命令即可
需要注意的是,扩展不需要在特定的 VSCode 项目内安装,它会全局添加到电脑上的 Gemini 配置中。Gemini CLI 的扩展采用全局安装机制,直接注册到用户主目录下的 Gemini 配置文件夹(通常是 ~/.gemini/Extensions/)中,作为全局可用的 MCP 服务器存在。这与 VS Code 扩展在每个工作区窗口中独立激活的方式有所不同——无论你在哪个项目目录下启动 Gemini CLI,都能访问已安装的扩展功能。安装完成后,可以在 Gemini 文件夹下的 Extensions 目录中看到新增的 Nano Banana 扩展文件夹。
配置 API 密钥
使用 Nano Banana 扩展需要一个 API 密钥,并且生成图片是付费的——每生成一张图像大约花费 15 到 25 美分,具体取决于图像质量。
创建 API 密钥的过程与之前在 Google AI Studio 为 Gemini CLI 创建密钥时完全一样,甚至可以直接复用同一个 API 密钥。获取密钥后,需要将其添加到项目的 .env 文件中:

在 .env 文件中创建一个名为 NANO_BANANA_GEMINI_API_KEY 的环境变量(全大写),将 API 密钥粘贴进去并保存。当发送生成图像的请求时,Nano Banana 会自动读取这个环境变量进行身份验证。
.env 文件是一种在软件开发中广泛使用的配置管理方式,源自"十二要素应用"(Twelve-Factor App)方法论中"将配置存储在环境中"的原则。它的核心思想是将 API 密钥、数据库连接字符串等敏感信息从源代码中分离出来,以纯文本键值对的形式存储在项目根目录中。在实际开发中,.env 文件必须被添加到 .gitignore 中以防止被提交到版本控制系统。Node.js 生态中常用 dotenv 库来加载这些变量,而现代运行时如 Bun 和 Deno 已内置了对 .env 文件的原生支持。对于生产环境,更推荐使用 AWS Secrets Manager、HashiCorp Vault 等专用密钥管理服务来进一步提升安全性。
⚠️ 安全提醒:绝不要公开自己的 API 密钥,因为别人可能会盗用它产生费用。
Nano Banana 提供的 MCP 命令
安装完成后,Nano Banana 会注册一个全局 MCP 服务器,并在 Gemini CLI 中添加一系列自定义命令。
这里提到的 MCP,即 Model Context Protocol(模型上下文协议),是由 Anthropic 于 2024 年底提出并开源的一项标准化协议。它的核心目标是为 AI 模型与外部工具、数据源之间建立统一的通信接口,类似于 USB-C 为各种设备提供了统一的物理连接标准。在 MCP 架构中,AI 应用(如 Gemini CLI)充当"客户端",而像 Nano Banana 这样的扩展则作为"服务器"运行,通过标准化的 JSON-RPC 消息格式进行双向通信。这意味着扩展开发者只需实现一次 MCP 服务器接口,就能让自己的工具被所有支持 MCP 的 AI 客户端调用,极大降低了生态集成的复杂度。
在聊天输入框中输入斜杠 /,然后按上键即可查看所有新增的命令:
/generate— 生成图像/edit— 编辑已有图像/diagram— 生成图表/icon— 制作图标- 以及其他更多命令
这些命令覆盖了常见的图像生成需求,并且支持手动为命令添加上下文信息,让生成结果更加精准。
实战:用 Nano Banana 为网页生成食物组合图片
使用 /generate 命令生成图片
在这个实战案例中,目标是为首页的食物组合卡片生成配图。首先打开首页文件,选中组合卡片的相关代码以自动添加到上下文中,然后使用 /generate 命令并输入以下提示词:
我需要三张图片用于首页的食物组合:
一张是奶酪和马麦酱,一张是薯片和巧克力,一张是草莓和胡椒
按回车后,Gemini CLI 会请求使用「生成图片」这个 MCP 工具的权限。选择「始终允许」后,扩展开始工作。

Nano Banana 背后依赖的 AI 图像生成技术经历了快速迭代。从 2022 年 Stable Diffusion 和 DALL·E 2 开创文本到图像生成的先河,到 2023 年 Midjourney V5 和 DALL·E 3 在真实感和语义理解上的飞跃,再到 2024-2025 年 Google Imagen 3、Flux 等模型在细节控制和一致性方面的突破,这一领域的进步速度令人瞩目。这些模型大多基于**扩散模型(Diffusion Model)**架构——从纯噪声图像出发,通过学习到的去噪过程逐步生成清晰图像。每张图片 15-25 美分的定价正是反映了推理阶段的 GPU 计算成本,因为生成一张高质量图像通常需要数十步迭代去噪,每一步都涉及大量矩阵运算。
生成完成后,所有图片会被保存到 Nano Banana 的输出目录中。打开文件管理器可以看到三张高质量的食物组合图片:
- 马麦酱配芝士 — 效果不错
- 巧克力配薯片 — 看起来很诱人(巧克力配盐醋薯片确实是绝佳组合)
- 草莓配胡椒 — 同样生成成功
将生成的图片集成到网页中
图片生成后,下一步是让 Gemini CLI 将这些图片应用到实际的网页组件中。只需在聊天中输入:
你能把这三张新图片添加到主页的组合卡片上吗?
Gemini CLI 会自动完成以下操作:
- 将图片移动到项目的公共文件夹中
- 在代码中添加正确的图片 URL 引用
- 更新组合卡片组件的代码

切换到浏览器预览,向下滚动到组合卡片区域——三张新生成的图片已经完美地展示在页面上,效果非常不错。整个过程从生成图片到集成上线,几乎不需要手动编写任何代码。
使用 AI 编码助手的几点建议
作为 Gemini CLI 系列教程的收尾,这里分享几点关于使用 AI 编码助手的重要建议:

不要过度依赖 AI
AI 是强大的辅助工具,但过度依赖会阻碍个人技能的发展。无论是编码、写作、设计还是其他领域,保持自主思考和动手能力至关重要。
AI 并非万能
AI 编码助手不能解决所有问题,也会犯错。根据实际经验,在开发的各个阶段保持参与、正确引导 AI、在必要时深入细节,这些都是确保项目质量的关键。
保持主动参与开发过程
最佳实践是将 AI 作为「加速器」而非「替代品」。开发者应该:
- 理解 AI 生成的每一段代码
- 在关键决策点进行人工审查
- 利用 AI 处理重复性工作,将精力集中在架构设计和业务逻辑上
这些建议并非空谈。GitHub 在 2024 年的开发者调查中发现,使用 Copilot 的开发者完成任务速度提升了约 55%,但代码审查中发现的逻辑错误率也上升了约 20%。这催生了 "AI-in-the-loop"(AI 在环中) 的协作范式:开发者负责架构设计、需求分析和最终审查,AI 负责代码生成、模式匹配和重复性工作。斯坦福大学的研究还指出,过度依赖 AI 代码补全的初级开发者在独立编程能力测试中的表现明显低于对照组。因此,最佳实践是将 AI 视为"结对编程伙伴"——它可以加速执行,但架构决策和质量把关的责任始终在人。
总结
Nano Banana 扩展为 Gemini CLI 带来了 AI 图像生成能力,极大地拓展了其在前端开发中的应用场景。从安装配置到实际使用,整个流程相当流畅。虽然每张图片需要 15-25 美分的成本,但对于快速原型设计和开发效率的提升来说,这是一个值得考虑的投资。结合 Gemini CLI 本身的代码生成能力,开发者可以实现从图片生成到代码集成的全流程自动化,显著提升开发效率。
核心要点
- Nano Banana 扩展为 Gemini CLI 添加图像生成能力,支持生成图片、图表、图标等多种类型
- 使用该扩展需要配置 API 密钥,每张图片生成成本约 15-25 美分
- 通过简单的自然语言提示词即可批量生成图片,并让 AI 自动将图片集成到项目代码中
- 扩展通过 MCP 服务器机制工作,全局安装后可在任何项目中使用
- 作者建议开发者不要过度依赖 AI 工具,应在开发各阶段保持主动参与和代码审查
相关推荐
教程攻略Cursor+Codex双IDE协同:开源项目二开实战方法论
基于实战经验总结的开源项目二次开发完整方法论,详解Cursor+Codex双IDE协同工作流,涵盖二开七环节、MVP验证、AI读源码技巧,帮助开发者三天跑通项目、两周完成业务集成。
教程攻略Cursor多Agent实战:50分钟搭建Next.js全栈博客
使用Cursor IDE多Agent协作模式,50分钟内从零搭建全栈博客。涵盖Next.js、Clerk认证、Supabase数据库集成,详解4个AI Agent分阶段开发流程与关键避坑经验。
教程攻略从零搭建AI软件工厂:Cursor工程师的多Agent协作实战经验
Cursor工程师Eric分享AI软件工厂构建实战:从自动化六层级、护栏设计、并行Agent管理到规模化扩展,详解如何用多Agent协作实现7×24小时高效软件开发。