Building a Style-Aware AI Image Generator with Nano Bana, React, and Hono.

Source: Dev.to

Overview

Out of sheer curiosity to test the limits of the new Google Gemini models, I built Amaris—a full‑stack SaaS application that lets you generate images with specific artistic styles using a simple chat interface. No complex workflows, just upload a reference image, type a prompt, and let the AI do the heavy lifting!

• Stack: “Better‑T‑Stack” (Bun, Hono, React 19)
• AI: Google Gemini 2.5 Flash Image model via the Vercel AI Gateway

If you’re interested in building modern AI apps, learning about monorepos, or just want to see how Hono handles AI streams, this project is a great sandbox.

Demo video:
https://x.com/devguy_007/status/1997485877325394061?s=20

Repository:
🔗

✨ Features

• 💬 Chat‑Based Interface – Generate images in a conversational flow.
• 🎨 Style Transfer – Upload a reference image (sketch, painting, etc.) and the AI mimics that style.
• ⚡ Blazing Fast Backend – Powered by Hono and running on Bun.
• 🧠 Smart Vision – Uses Gemini to “see” your style references before generating.
• 🔐 Full Auth System – Secure login with Better‑Auth.
• 💳 Credit System – Built‑in logic for managing user credits and usage limits.
• 🌑 Modern UI – Dark mode, Tailwind CSS 4, and shadcn/ui components.

🧰 Complete Tech Stack

Core & Runtime

Frontend (apps/web)

Backend (apps/server)

Data & Authentication

AI & Services

🚀 Getting Started Locally

1️⃣ Clone the repository

git clone https://github.com/oyeolamilekan/amaris-app
cd amaris

2️⃣ Install dependencies

We use Bun for speed:

bun install

3️⃣ Set up environment variables

Create the following .env files (replace placeholder values with your own).

apps/server/.env

DATABASE_URL=postgresql://user:pass@localhost:5432/amaris
GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_key
CORS_ORIGIN=http://localhost:5173
CLOUDINARY_CLOUD_NAME=your_cloud_name
POLAR_ACCESS_TOKEN=your_polar_token

4️⃣ Push the database schema

bun run db:push

5️⃣ Start the development server

bun run dev

Open in your browser and start generating!

🧪 How It Works

1. Upload a style – Drop an image (e.g., pixel‑art character) into the chat.
2. Vision analysis – Backend uses Gemini’s vision capabilities to understand the image’s “vibe.”
3. Prompt – Type something like “A futuristic city.”
4. Generation – The app combines your prompt with the style reference and sends it through the Vercel AI Gateway to Google Gemini.
5. Result – Seconds later you receive a futuristic city rendered in the chosen style.

💭 Why I Built This

I wanted to move beyond simple “text‑to‑image” scripts and build a production‑ready architecture. The goals were:

• Explore how Hono pairs with React 19 in a monorepo.
• Integrate payment flows (Polar.sh) alongside complex AI logic.
• Leverage the speed and low cost of Gemini 2.5 for style‑transfer experiments.

🧑‍💻 Try It, Fork It, Break It!

The project is open‑source and meant to be hacked on. Feel free to:

• Clone the repo.
• Swap out the database or AI model.
• Turn it into a comic‑book generator, meme generator, etc.

GitHub:
Amaris App

🙌 Let’s Connect

If you try it out or have questions about the stack, drop a comment or tag me!

Happy hacking! 👨🏽‍💻✨