DEV Community

Evelyn Chen for Momen

Posted on

How to build a Nano Banana Image Generator App using Momen's Nano Banana StyleBank Template

Introduction

The Nano Banana StyleBank template allows users to generate AI images using built-in preset styles, making it easy to produce fast and consistent visual results. It supports both text-to-image and image-to-image workflows and uses a credit-based system, with the first two credits granted for free. Image generation is powered by Nano Banana Pro.

Here’s a walkthrough of the template: video

Basic Project Logic

This template follows a simple flow. Users sign up, receive free credits, and generate images using preset styles. Each image generation consumes credits. When credits run out, users can purchase more, and the system automatically handles payment, credit updates, and image history storage.

Data

This template uses 3 core business tables, along with system default tables that handle AI and payment logic.

  • Account: The Account table stores user login information such as email, password, and profile image. It also tracks how many credits each user currently has, which determines how many images the user can generate.
  • Image Generation History: This table stores every image generated by users. It records the refined prompt used for generation and links each image back to the user who created it, allowing users to review their generation history.
  • Order: The Order table represents each purchase request. It stores the order amount and status and connects the order to the user account and related payment records.

In addition to the core tables, the template relies on system default tables.

  • Payment-related tables store payment records, recurring payment data, and refund information.
  • AI-related tables store conversation data, message content, and tool usage records. These system tables work automatically and usually do not require modification.

The database is also used to store preset image styles.

Generation Style: This table stores preset and refined prompts used as image styles. Each record represents one style option that users can select when generating images. By managing this table, you can add new styles or adjust existing ones to control the visual output without changing any logic.

Design

The interface of this template focuses on 3 main pages.

  • Register page: This page is used for user sign up and sign in. Once a user successfully registers or logs in, an account record is created or retrieved automatically.
  • Generate page: This is the main image creation page. Users select a preset style, enter a text prompt or upload a reference image, and trigger image generation.
  • User Center page: This page displays the user’s image generation history and remaining credits. It also allows users to purchase additional credits when needed.

AI

This template uses 1 AI agent for image generation.

The Image Generation Agent takes a text prompt and an optional reference image as input and returns a generated image as output. Preset styles are applied by injecting refined prompts stored in the Generation Style table.

If you want to add more styles or adjust the visual direction, you can update these prompt records directly without changing the AI agent itself.

In the top-right corner of the AI configuration panel, you can select the AI model for this agent. In this template, Gemini 3 Pro Image (Nano Banana Pro) is used for image generation.

Actionflow

Actionflows handle all automated logic in this template, including credit management, image generation, and order creation.

Auto grant free credit: After a user signs up or logs in, the system automatically grants two free credits to the user account, allowing new users to try the product immediately.

Image generation flow: When a user submits a prompt, the system first checks whether the user has enough credits. If at least one credit is available, one credit is deducted, the AI image generation agent is called, the generated image and refined prompt are saved to the Image Generation History table, and the result is displayed to the user.

Create order: When a user chooses to buy credits, the system securely creates an order record with a fixed price. This ensures the payment amount cannot be modified on the client side and keeps the payment process safe and consistent.

Top comments (0)