AI-powered virtual try-on platform for experimenting with clothes online using Google Gemini 3 Pro.
- AI-Powered: Uses Google Gemini 3 Pro for high-quality image generation
- Example Models: Try on clothes with 5 diverse example models without uploading your photo
- User Photos: Upload your own photo for personalized try-on experience
- Instant Results: See yourself wearing any garment in seconds
- 20+ Products: Curated catalog of t-shirts, hoodies, jackets, pants, and dresses
- Functional Filters: Filter by category, gender, price range, size, and color
- Smart Sorting: Sort by featured, price (low/high), or newest
- Persistent Favorites: Save your favorite items (persisted across sessions)
- Responsive Design: Optimized for mobile, tablet, and desktop
- Nike-Inspired UI: Clean, modern, professional design
- Node.js 22+
- pnpm
- OpenRouter API Key (required) - Get free credits at openrouter.ai/keys
# Install dependencies
pnpm install# Run development server
pnpm dev
# Open http://localhost:3000# Create production build
pnpm build
# Run production server
pnpm startRequired: You need your own OpenRouter API key to use the virtual try-on feature.
- Sign up at OpenRouter
- Get free credits for new accounts
- Copy your API key
- Click the settings icon (⚙️) in the app
- Paste your API key and save
OpenRouter provides free credits for new users, so you can start experimenting immediately!
- Next.js 16 - React framework with App Router
- React 19 - Latest React with modern hooks
- TypeScript - Type-safe development
- Tailwind CSS 4 - Utility-first styling
- Zustand - Lightweight state management
- Radix UI - Accessible component primitives
- Sonner - Beautiful toast notifications
- OpenRouter API - AI model gateway
- Google Gemini 3 Pro Image Preview - High-quality image generation
- Next.js API Routes - Serverless backend
- ESLint - Code linting
- Prettier - Code formatting
- Knip - Unused code detection
- pnpm - Fast, efficient package manager
├── app/
│ ├── api/ # API routes
│ │ ├── virtual-try-on/ # Main AI generation endpoint
│ │ └── test-key/ # API key validation
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/
│ ├── ui/ # Reusable UI components (Radix + shadcn)
│ ├── product-card.tsx # Individual product with try-on
│ ├── product-grid.tsx # Product catalog with filters
│ ├── filter-sidebar.tsx # Functional filter panel
│ ├── api-key-manager.tsx # API key configuration
│ └── ...
├── lib/
│ ├── api/ # API utilities
│ │ ├── openrouter-service.ts # OpenRouter integration
│ │ ├── prompts.ts # AI prompt generation
│ │ └── constants.ts # API configuration
│ ├── encryption.ts # Client-side key encryption
│ ├── products-data.ts # Product catalog
│ └── example-models.ts # Example person models
├── store/
│ ├── useAppStore.ts # Zustand global state
│ └── types.ts # TypeScript types
└── hooks/
└── use-toast.ts # Toast notifications
- Choose a Model: Upload your photo or select from 5 diverse example models
- Browse Products: Explore 20+ clothing items with functional filters
- Try Virtually: Click the AI icon on any product to generate a preview
- See Results: Google Gemini generates a realistic preview in seconds
- Save Favorites: Heart icon saves items for later (persisted in localStorage)
- User image and selected example model
- Active filters and sorting preferences
- Persistent favorites across sessions
- Product catalog and filtered results
- Categories: T-Shirts, Hoodies, Jackets, Pants, Dresses
- Gender: All, Men, Women, Unisex
- Price Range: $0-$200 slider
- Sizes: XS, S, M, L, XL, XXL
- Colors: Black, White, Gray, Beige, Blue, Pink
Pre-loaded diverse models for instant try-on without uploading photos:
- Various genders, skin tones, and styles
- High-quality Unsplash images
- Immediate preview capability
Educational project - MIT License