---
name: bijection-convex-nano-banana
description: "Evaluate and integrate the Nano Banana component with Bijection."
---

# Nano Banana

Generate stunning AI images directly in your Convex backend with persistent storage, real-time status tracking, and a clean TypeScript API.

This is an upstream package. It has not been adapted or qualified for Bijection.

- Package: convex-nano-banana
- Source: https://github.com/dperussina/convex-nano-banana
- npm: https://www.npmjs.com/package/convex-nano-banana
- Directory: https://bijection.com/components/convex-nano-banana

Read the upstream README for setup, license, and compatibility before using it.

## Integration workflow

1. Read the source README and package manifest at the recorded revision.
2. Confirm the required SDK, dependency availability, and runtime compatibility.
3. Follow the component's documented setup and configuration. Never invent an npm install command from a catalog package name.
4. Keep credentials in the project's existing secret store.
5. Follow the project's execution rules for verification and report what was actually checked.

## Original upstream skill

The following guidance describes convex-nano-banana. Its installation commands and APIs refer to the upstream package. Evaluate compatibility with the Bijection source separately.


# Nano Banana

## Instructions

Nano Banana integrates Google Gemini's AI image generation directly into your Convex backend with persistent file storage and real-time status tracking. It provides a TypeScript API for text-to-image generation and image editing, handling the complete lifecycle from generation through storage in Convex. The component includes reactive queries that automatically update as generation progresses, plus user management and generation history tracking.

### Installation

```bash
npm install convex-nano-banana
```

## Use cases

• **Content creation apps** - Build social media platforms or creative tools where users generate custom images from text prompts with real-time progress updates
• **E-commerce product visualization** - Generate product mockups or lifestyle images by editing existing product photos with text instructions
• **Multi-tenant SaaS applications** - Implement AI image generation features where each customer uses their own Gemini API key for billing isolation
• **Content moderation workflows** - Generate test images for training moderation systems or create placeholder content with specific characteristics
• **Creative collaboration platforms** - Allow users to iterate on images through text-based editing while maintaining version history and persistent storage

## How it works

The component wraps Google Gemini's image generation API in a Convex-native interface, automatically handling file storage and status tracking. You initialize the `NanoBanana` class with your component reference and optional default configuration, then call methods like `generate()` for text-to-image or `edit()` for image modification.

Generation requests create database records with status tracking (pending, generating, complete, failed) that update reactively through Convex queries. Images are automatically stored in Convex file storage and linked to generation records. The `get()` method provides real-time status updates that trigger React re-renders as generation progresses.

The component supports multiple Gemini models and accepts configuration options like aspect ratios and image sizes. API keys can be set globally during initialization or passed per-request for multi-tenant scenarios. All generations are tied to user IDs for access control and include timing metrics and error handling.

## When NOT to use

- When a simpler built-in solution exists for your specific use case
- If you are not using Convex as your backend
- When the functionality provided by Nano Banana is not needed

## Resources

- [npm package](https://www.npmjs.com/package/convex-nano-banana)
- [GitHub repository](https://github.com/dperussina/convex-nano-banana)
- [Convex Components Directory](https://www.convex.dev/components/convex-nano-banana)
- [Convex documentation](https://docs.convex.dev)