nano-banana

KO | EN

gitlite — search

#javascript #python #react #ai #llm #golang #android #machine-learning #rust #deep-learning #awesome #kubernetes #security #open-source

(★ 11)

NanoBanana — Gemini Image Generator Skill for AI Agents

nano-banana 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🍌 NanoBanana — Gemini Image Generator Skill for AI Agents

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/v587d/nano-banana/main/LICENSE)
[![Platform](https://img.shields.io/badge/platform-OpenCode-brightgreen.svg)](https://github.com/opencode-ai/opencode)

Generate images using **Google Gemini** via browser automation — no API key required. NanoBanana drives Chrome through an MCP server to automate the full pipeline: open Gemini → input your prompt → wait for generation → extract the blob URL.

> **TL;DR**: Type `/nano-banana your prompt` in OpenCode, get a blob URL back. That's it.

---

## 🎯 Why NanoBanana?

| | API Key Required | Image Generation | Cost |
|---|---|---|---|
| **Gemini API** | Yes | Requires separate billing | Pay-per-use |
| **Midjourney** | Subscription | Discord-only | $10-30/mo |
| **DALL·E** | Yes | Rate-limited | Pay-per-use |
| **NanoBanana** | ❌ | Via Google account (free tier) | Free |

NanoBanana uses your existing Google account's free Gemini quota (typically ~20 images/day on free tier) — no API key, no billing setup, no subscription.

---

## 🎬 Demo

[![NanoBanana Demo](http://mmbiz.qpic.cn/sz_mmbiz_jpg/ia7XX5XENN4yfkbJK6aywiacULpVZWRXLgXq6KDY7iaD9SDibPicu9pvpQHfBftqNGhL6lQEDSPaqJVcb8siahJM7sIpchN8VkC9XUZqbZojYjVBE/0?wx_fmt=jpeg)](http://mpvideo.qpic.cn/0bc3cqc7oaafoianodz36vvfkfgd64kal5ya.f10002.mp4?dis_k=8848d4555795623c13b021d9129e7c93&dis_t=1782876230&play_scene=10600&auth_info=RcTbzuoDFHhMhrKi5gpcRBZVJWwYU0ghdipQOEhVOVl9I2ZOQAY8eA==&auth_key=67ce6a75ad17eaf186f31e974a93f3a7)

> Click the preview above to watch the full demo video

---

## ✨ Features

- **Zero API Key** — uses your existing Google login
- **One-command generation** — `/nano-banana a cyberpunk city at night`
- **Full browser automation** — no manual clicking, no copy-paste
- **Blob URL output** — returns the image URL directly, no OS-level file handling
- **Prompt engineering built-in** — the skill auto-enriches your natural language into high-quality Gemini prompts
- **Multi-language** — supports both English and Chinese prompts
- **Robust error handling** — login detection, timeout recovery, incognito/background tab fallback

---

## 📋 Prerequisites

### 1. Google Chrome
Install the latest version of [Google Chrome](https://www.google.com/chrome/).

### 2. Chrome MCP Server

An MCP server that exposes Chrome DevTools Protocol to your AI agent. We recommend the official one:

#### Option A: Official Google Chrome DevTools MCP *(recommended)*

```bash
# No installation needed — just configure your agent:
```

**Repository**: [ChromeDevTools/chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp)  
**Stars**: 44k+ | **Maintainer**: Google Chrome DevTools Team  
**npm**: [`chrome-devtools-mcp`](https://www.npmjs.com/package/chrome-devtools-mcp)

#### Option B: Community Chrome MCP Server

Testing note: NanoBanana was developed and tested using a Chrome MCP Server configured as `chrome-mcp-server` in OpenCode. An alternative community implementation is available at:

**Repository**: [syedazharmbnr1/chrome-mcp-server](https://github.com/syedazharmbnr1/chrome-mcp-server)

> ⚠️ **Important**: Both options work. The skill uses standard Chrome DevTools Protocol operations (navigation, DOM access, JS execution, click/keyboard events) — any MCP server that exposes these capabilities is compatible. We welcome contributors to test and report compatibility with different MCP server implementations!

### 3. Google Account

Log into your Google account in Chrome **before** using the skill:

1. Open Chrome
2. Navigate to [`https://gemini.google.com/app`](https://gemini.google.com/app)
3. Sign in with your Google account
4. Keep the browser open (the MCP server connects to this instance)

> 💡 **Tip**: Opening Gemini manually beforehand avoids the skill having to handle login flows.

---

## 🚀 Installation

### For OpenCode Users

1. Make sure `chrome-mcp-server` (or `chrome-devtools-mcp`) is configured in your OpenCode `config.json`:

```json
{
  "mcpServers": {
    "chrome-mcp-server": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}
```

2. Copy the `nano-banana` skill folder to your OpenCode skills directory:

```
~/.config/opencode/skills/nano-banana/
  ├── SKILL.md          # Skill implementation
  ├── README.md         # You're reading this
  ├── README_zh.md      # 中文文档
  └── references/
      └── selectors.md  # Gemini UI DOM selectors reference
```

3. Restart OpenCode (or reload skills).

4. Open Chrome, navigate to `https://gemini.google.com/app`, and sign in.

5. In OpenCode, type: `/nano-banana a beautiful sunset over mountains`

---

## 📖 Usage

### Basic

```
/nano-banana generate an image, city at night
```

### Detailed Prompt

```
/nano-banana a cyberpunk Tokyo alleyway at midnight, neon kanji signs reflecting
in rain puddles, steam rising from street vents, a solitary figure in a translucent
raincoat, cinematic low-angle shot, volumetric lighting, blade runner aesthetic, 16:9
```

### Chinese Prompts

```
/nano-banana 生成一张赛博朋克风格的东京夜景图片
```

### What Happens

1. NanoBanana checks if Chrome is on Gemini
2. Constructs an optimized prompt (adds style, composition, camera directives)
3. Inputs the prompt into Gemini via browser automation
4. Waits for the image to generate (typically 15-60 seconds)
5. Extracts the blob URL from Gemini's `<generated-image>` element
6. Returns the blob URL (e.g. `blob:https://gemini.google.com/<uuid>`)

---

## 🎨 Prompt Engineering

NanoBanana includes a comprehensive prompt engineering guide (see `SKILL.md`). Key principles:

| Principle | Bad | Good |
|---|---|---|
| **Be specific** | `fantasy armor` | `ornate elven plate armor, etched with silver leaf patterns, falcon-wing pauldrons` |
| **Use narrative** | `cat, cute, sitting` | `a fluffy orange tabby cat sitting regally on a velvet cushion, morning light streaming through a window` |
| **Camera terms** | `take a photo` | `85mm portrait lens, f/1.8, shallow depth of field, golden hour` |
| **Aspect ratio** | *(unspecified)* | `16:9` / `1:1` / `9:16` |
| **Positive framing** | `no cars, no rain` | `an empty sun-drenched road with clear blue sky` |

See the full [Prompt Engineering Guide](SKILL.md#nanobanana-prompt-工程指南) for the complete 10-dimension prompt formula.

---

## 🔧 Troubleshooting

| Issue | Cause | Solution |
|---|---|---|
| "Sign in" required | Login session expired | Manually sign in at `gemini.google.com`, then retry |
| Image never appears (>180s) | Generation timeout | Check Gemini page for error messages; retry with simpler prompt |
| "Image Generation Limit Reached" | Daily quota exhausted | Wait for reset or switch Google account |
| Empty editor / prompt not submitting | TrustedHTML restriction | Already handled via `textContent` + `createElement` workaround |
| Blob URL exists but image won't show | Gemini tab in background (especially incognito) | Switch to Gemini tab to trigger rendering, or just open the blob URL directly |
| Chrome not responding | MCP server connection lost | Restart Chrome and the MCP server |

---

## 🏗️ Architecture

```
┌──────────────┐     ┌──────────────────┐     ┌─────────────┐     ┌──────────┐
│   OpenCode   │────▶│  Chrome MCP      │────▶│   Chrome    │────▶│  Gemini  │
│   (Agent)    │     │  Server (CDP)    │     │  (Browser)  │     │  (.com)  │
└──────────────┘     └──────────────────┘     └─────────────┘     └──────────┘
       │                      │                      │                   │
       │  /nano-banana        │  chrome_navigate()   │  gemini.google.   │
       │  "prompt"            │  chrome_javascript()  │  com/app          │
       │                      │  chrome_click_element()│                  │
       │                      │  chrome_read_page()   │                  │
       ▼                      ▼                      ▼                   ▼
  SKILL.md              MCP Tools              DOM/JS Engine      Image Generation
  (Instructions)        (stdin/stdout)         (CDP Protocol)     (Gemini Model)
```

---

## 🤝 Contributing

Contributions are welcome! Areas where help is especially appreciated:

- **New agent harness support**: Currently tested on OpenCode. Help us test on Claude Code, Cursor, Windsurf, and others.
- **Selector maintenance**: Google updates Gemini UI frequently. Help keep the DOM selectors up to date.
- **Prompt engineering**: Share your best prompt patterns and magic keywords.
- **Error recovery**: Better handling of edge cases (network issues, rate limits, UI changes).

### How to Contribute

1. Fork and clone the repository
2. Test your changes in your own OpenCode setup
3. Update selectors or prompt logic as needed
4. Open a PR with a description of what you changed and why

---

## 📄 License

MIT — see [LICENSE](LICENSE) for details.

---

## 🙏 Acknowledgments

- **Google Gemini** — for the free image generation
- **Chrome DevTools MCP** — [ChromeDevTools/chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) by the Chrome team
- **OpenCode** — the agent harness where NanoBanana was born
- **Community Selector Sources** — [kvenux/gemini-image](https://github.com/kvenux/gemini-image), [schobiDotDev/geminikit](https://github.com/schobiDotDev/geminikit), and others

---

*Made with 🍌 for the AI agent community*

nano-banana

nano-banana 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

nano-banana

nano-banana 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README