AI Avatar Generator - Hackathon Project

Our goal: AI-powered avatar generator - make it as simple as selecting traits and clicking a button.

🧠 What We Learned

AI Integration

• Used Google nano-banana model for better reliability
• Prompt engineering is crucial - built a sophisticated prompt builder translating traits into effective AI instructions
• Mastered handling base64 images, data URLs, and streaming API responses

Architecture

• Used Next.js API routes for secure server-side API key management
• Comprehensive error handling for network failures and API rate limits

🛠️ How We Built It

Tech Stack

• Next.js 15 + TypeScript + Tailwind CSS + shadcn/ui
• Replicate API with Google's nano-banana model
• React hooks for state management

Generation Pipeline

1. User selects traits from 6 categories (48 total options)
2. Custom prompt builder transforms traits into AI instructions
3. Next.js API route forwards request to Replicate
4. nano-banana model generates image (10-30 seconds)
5. Image converted to data URL and displayed in preview

Built With

• next
• react
• vercel