AI Banner Generator Guide

A complete guide to AI Banner Generator — the AI-powered platform for creating professional banners, ads, and marketing visuals in seconds.

AI Banner Generator is an AI-powered banner and marketing visual creation platform that lets you generate high-quality banners, ads, and marketing visuals from text descriptions or images. No design experience required — just describe what you want and let AI do the work.

Tech Stack

AI Models: State-of-the-art generative AI for banner and image creation
Framework: Next.js App Router with TypeScript
Auth: Better Auth (GitHub + Google OAuth, email/password)
Database: PostgreSQL with Drizzle ORM
Payments: Stripe (subscriptions, one-time purchases, credit packages)
UI: Tailwind CSS + Radix UI + Lucide icons
i18n: next-intl (English + Chinese)
Email: Resend with React Email templates
Content: Fumadocs for documentation, MDX for blog

Quick Start

Prerequisites

Node.js 18+
pnpm (recommended)
PostgreSQL database

Installation

git clone https://github.com/zhangst23/ai-banner-generator.git
cd ai-banner-generator
pnpm install

Environment Setup

Copy the example environment file and fill in your values:

cp env.example .env.local

Key environment variables:

# Database
DATABASE_URL=postgresql://user:password@localhost:5432/ai-banner-generator

# Auth
BETTER_AUTH_SECRET=your-secret-key
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# Stripe
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Email
RESEND_API_KEY=re_...

# AI (Kie API for image generation)
KIE_API_KEY=your-kie-api-key
NEXT_PUBLIC_KIE_MODEL=z-image

Database Setup

Generate and run migrations:

pnpm db:generate
pnpm db:migrate

Start Development

pnpm dev

Visit http://localhost:3000 to see your app.

Key Features

Generate banners from text or images:

Text to Banner: Describe any banner in natural language
Image to Banner: Upload reference images to create polished banners
Smart Layouts: Automatically optimized for every platform and size
Brand-consistent Styles: Generate banners that match your brand identity

Multi-format Export

Export your creations in any format:

PNG — High-quality with transparency support
JPG — Optimized for web and email
WebP — Modern format with better compression
SVG — Scalable vector graphics for print

Use Cases

Banners for every platform and purpose:

Social Media — Perfectly sized for Facebook, Instagram, Twitter/X, LinkedIn
Website Headers — Hero banners and header images
Email Campaigns — Eye-catching email headers and promotional banners
Digital Ads — Display ads in all standard sizes
YouTube — Thumbnails and channel banners
Blog & Content — Featured images and post banners

Credit System

Flexible usage-based billing:

Monthly credit refresh for subscribers
Registration bonus credits
Credit packages for additional generations
Usage tracking with transaction history

Supported Use Cases

E-commerce — Promotional banners for product launches and sales
SaaS & Tech — Marketing banners and feature images
Small Business — Professional banners without hiring a designer
Content Creators — Thumbnails, channel art, social media banners
Event Marketing — Conference, webinar, and workshop materials
Education — Course banners and educational campaign visuals

API Integration

AI Banner Generator provides a REST API for programmatic banner generation:

# Generate a banner from text
POST /api/v1/generate
{
  "prompt": "A modern tech startup banner with gradient background",
  "aspect_ratio": "16:9",
  "style": "professional"
}

API keys can be managed from your dashboard under Settings → API Keys.

Common Tasks

Adding a New Page

Create a new file in src/app/[locale]/(marketing)/
Add the route to src/routes.ts
Add navigation links in src/config/navbar-config.tsx

Deploying to Production

pnpm build

The app is ready for deployment on Vercel, Docker, or any Node.js hosting platform.

Learn More

Configuration Guide — Customize the platform for your needs
API Reference — Explore available endpoints and actions