AI Asset Generator

An AI-powered web application that generates professional app assets (hero images, app icons, and splash screens) using OpenAI and Lucide icons.

Features

• 🤖 AI-Powered Icon Selection: Automatically selects the most appropriate Lucide icon based on your app name and tagline
• 🎨 Professional Asset Generation: Creates three types of assets:
  • Hero Image (1200×630px) - Perfect for social sharing
  • App Icon (1024×1024px) - High-res for app stores
  • Splash Screen (200×200px) - For loading screens
• 📱 Modern UI: Built with Next.js 14, Tailwind CSS, and shadcn/ui components
• 💾 Instant Download: Download generated assets as PNG files
• 🌙 Dark Mode Support: Built-in theme switching

Tech Stack

• Frontend: Next.js 14, React 18, TypeScript, Tailwind CSS v4
• UI Components: shadcn/ui with Radix UI primitives
• AI: OpenAI GPT-4o for icon selection and SVG generation
• Image Processing: Sharp for SVG to PNG conversion
• Icons: Lucide React (1800+ icons available)

Setup

1. Clone the repository

   git clone <repository-url>
   cd asset-generator

2. Install dependencies

   pnpm install

3. Set up environment variables Create a .env.local file in the root directory:

   OPENAI_API_KEY=your_openai_api_key_here

4. Run the development server

   pnpm dev

5. Open your browser Navigate to http://localhost:3000

Usage

1. Enter App Details: Input your app name and tagline
2. Generate Assets: Click "Generate Assets" - the AI will:
   • Analyze your app's purpose
   • Select the most appropriate Lucide icon
   • Generate professional SVG assets
   • Convert them to high-quality PNG files
3. Download: Click the download buttons to save individual assets

How It Works

The application uses a streamlined process:

1. Single API Call: Everything happens in one request to /api/generate-assets
2. AI Analysis: OpenAI analyzes the app name and tagline to understand the app's purpose
3. Icon Selection: AI automatically selects the best icon from 1800+ Lucide icons
4. Asset Generation: Creates professional SVG assets with consistent branding
5. Image Conversion: Converts SVGs to PNG using Sharp for optimal quality
6. Instant Preview: Assets are returned as base64 data URLs for immediate preview

API Endpoint

POST /api/generate-assets

Request Body:

{
  "appName": "TaskMaster Pro",
  "tagline": "Organize your life with intelligent task management"
}

Response:

{
  "success": true,
  "selectedIcon": "check-square",
  "reasoning": "The check-square icon perfectly represents task completion and organization...",
  "alternatives": ["list-todo", "calendar", "clipboard-check"],
  "assets": {
    "heroImage": "data:image/png;base64,...",
    "appIcon": "data:image/png;base64,...", 
    "splashScreen": "data:image/png;base64,..."
  }
}

Environment Variables

Variable	Description	Required
OPENAI_API_KEY	Your OpenAI API key	Yes

Development

• Framework: Next.js 14 with App Router
• Styling: Tailwind CSS v4 with OKLCH color system
• Components: shadcn/ui (New York style)
• Type Safety: Full TypeScript coverage with Zod validation
• Image Processing: Sharp for high-quality PNG conversion

License

MIT License - feel free to use this project for your own applications.