AI-Powered Retail Media Ad Creation Platform
Problem • Solution • Features • Tech Stack • Setup • Team
RetailSync AI transforms the retail advertisement creation process through intelligent automation. The platform combines a professional canvas editor with AI-powered design assistance, enabling retail media teams to create compliant, high-quality ads in minutes instead of hours.
Live Demo: retail-sync-ai.vercel.app
Retail media is a $110+ billion industry growing at 30%+ annually. Organizations like Tesco manage thousands of SKUs across multiple categories, each requiring advertisements for various placements, seasons, and promotions.
But there's a fundamental problem: The ad creation process hasn't evolved with the demand.
After researching the retail media landscape and interviewing marketing teams, we identified critical bottlenecks:
Every advertisement goes through a lengthy cycle:
| Stage | Time Required | What Happens |
|---|---|---|
| Brief Creation | 30 minutes | Marketing team drafts requirements |
| Design Queue | 24-48 hours | Waiting for designer availability |
| Initial Design | 2-3 hours | Designer creates first draft |
| Review & Feedback | 1-2 hours | Stakeholder reviews and comments |
| Revisions | 2-4 hours | Average 3-4 revision rounds |
| Compliance Check | 2-4 hours | Manual brand guideline verification |
| Final Approval | 1-2 hours | Multiple stakeholder sign-offs |
Total: 48-72 hours per single advertisement
- 30% of ads fail first compliance review
- Manual verification misses subtle violations
- Inconsistent logo placement, wrong colors, typography issues
- Each failure adds another revision cycle
- 100% dependency on skilled designers
- Cannot scale during peak campaign periods (festivals, sales)
- High cost per ad: ₹2,000-5,000
- Limited designers = limited output
Tesco operates:
- 80,000+ SKUs across categories
- 4,000+ stores with different formats
- 20M+ Clubcard users for personalized campaigns
Traditional workflow simply cannot meet this demand.
Current Capacity: ~50 ads/week with full design team
Actual Demand: 500+ ads/week during campaigns
Gap: 10x shortage in production capacity
Instead of incremental improvements, we reimagined the entire workflow with AI at the core.
| Metric | Traditional | RetailSync AI | Improvement |
|---|---|---|---|
| Ad Creation Time | 4-6 hours | < 5 minutes | 95% faster |
| Designer Dependency | 100% | 10% | 90% reduction |
| Brand Compliance | 70% first-pass | 98% first-pass | 40% better |
| Cost per Ad | ₹2,000-5,000 | ₹200-500 | 90% cheaper |
| Revision Rounds | 3-4 | 0-1 | 75% fewer |
Step 1: Upload Assets
- Upload product images directly
- AI removes background automatically
- Access millions of stock images from Pexels
Step 2: AI Design Assistant
- Use natural language: "add red circle", "set background to blue"
- 70+ commands for complete design control
- AI understands context and executes instantly
Step 3: Compliance & Export
- Real-time brand guideline validation
- Automatic suggestions for fixes
- Export in PNG, JPEG, WebP formats
- Natural Language Interface - No design skills needed. Just describe what you want.
- Instant Execution - Sub-second AI responses via Groq LLaMA 3.3
- Built-in Compliance - Catch brand violations before they happen
- One-Click Operations - Background removal, filters, effects - all instant
Professional design environment built on Fabric.js 7.1.0:
- Multi-Layer Composition - Z-index management for complex designs
- Object Transforms - Resize, rotate, flip, align with precision
- Grid & Snap - Professional positioning guides
- History Management - Full undo/redo support
- Keyboard Shortcuts - Professional workflow optimization
Natural language design assistant powered by Groq LLaMA 3.3 70B:
| Category | Commands | Examples |
|---|---|---|
| Shapes | Circle, Rectangle, Star, Triangle | add red circle, add blue rectangle |
| Text | Text, Heading, Curved | add text SALE, add heading 50% OFF |
| Background | Color, Gradient, Blur | red background, blur background |
| Transform | Flip, Rotate, Scale | flip horizontal, rotate 45 |
| Effects | Shadow, Glow, Border | add shadow, add glow effect |
| Retail | Price Tag, Ribbon, Badge | add price tag ₹999, add sale ribbon |
| Export | PNG, JPEG, WebP | export png, export jpeg |
- Remove.bg - One-click AI background removal
- Pexels - Millions of royalty-free stock images
- Google OAuth - Secure authentication
| Layer | Technology | Version |
|---|---|---|
| Framework | Next.js | 16.1.1 |
| UI Library | React | 19.2.3 |
| Language | TypeScript | 5.x |
| Styling | Tailwind CSS | 4.x |
| Canvas | Fabric.js | 7.1.0 |
| AI | Groq LLaMA 3.3 | 70B |
| Database | MongoDB Atlas | - |
| Auth | NextAuth.js | 5.x |
┌─────────────────────────────────────────────────────────────────┐
│ CLIENT LAYER │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Next.js │ │ Fabric.js │ │ Tailwind │ │
│ │ Frontend │ │ Canvas │ │ CSS │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ API LAYER │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ /api/ │ │ /api/ │ │ /api/ │ │
│ │ ai-copilot │ │ remove-bg │ │ auth │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ EXTERNAL SERVICES │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Groq AI │ │ Remove.bg │ │ Pexels │ │
│ │ LLaMA 3.3 │ │ API │ │ API │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Google │ │ MongoDB │ │
│ │ OAuth │ │ Atlas │ │
│ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────────┘
retailsync-nextjs/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API Routes
│ │ │ ├── ai-copilot/ # AI Agent endpoint
│ │ │ ├── auth/ # NextAuth endpoints
│ │ │ └── remove-bg/ # Background removal
│ │ ├── editor/ # Canvas editor page
│ │ ├── dashboard/ # User dashboard
│ │ └── page.tsx # Landing page
│ │
│ ├── components/
│ │ ├── editor/ # Editor components
│ │ │ ├── AICopilotPanel.tsx
│ │ │ ├── CanvasEditor.tsx
│ │ │ ├── CompliancePanel.tsx
│ │ │ └── ...
│ │ └── ui/ # Reusable UI
│ │
│ └── lib/ # Utilities
│
├── public/ # Static assets
├── ARCHITECTURE.md # System architecture
├── RESEARCH_AND_DEVELOPMENT.md # R&D documentation
└── package.json
Node.js >= 18.0.0
npm >= 9.0.0
MongoDB Atlas account
Create .env.local:
# Authentication
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key
# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
# Database
MONGODB_URI=mongodb+srv://...
# AI Services
GROQ_API_KEY=your-groq-api-key
REMOVE_BG_API_KEY=your-removebg-api-key
PEXELS_API_KEY=your-pexels-api-key# Clone repository
git clone https://github.com/yashodipmore/RetailSyncAI.git
cd RetailSyncAI/retailsync-nextjs
# Install dependencies
npm install
# Run development server
npm run dev# Build for production
npm run build
# Deploy to Vercel
vercelAI Agent command processing endpoint.
Request:
{
"messages": [
{ "role": "user", "content": "add red circle" }
],
"canvasContext": {
"width": 728,
"height": 90,
"objectCount": 5
}
}Response:
{
"message": "Added a red circle to the canvas",
"actions": [
{ "command": "addCircle", "params": { "fill": "#ff0000" } }
]
}Background removal endpoint.
Request:
{
"image": "data:image/png;base64,..."
}Response:
{
"result": "data:image/png;base64,..."
}| Metric | Value |
|---|---|
| First Contentful Paint | < 1.5s |
| Largest Contentful Paint | < 2.5s |
| Cumulative Layout Shift | < 0.1 |
| AI Response Time | < 0.5s |
| Lighthouse Score | 95+ |
| Member | Role | Focus Area |
|---|---|---|
| Yashodip More | Full Stack Developer | AI Integration, System Architecture |
| Komal Kumavat | UI/UX Designer | Design Systems, User Experience |
| Jaykumar Girase | Backend Developer | API Architecture, Database |
| Tejas Patil | ML Engineer | Model Training, Quality Analysis |
Institution: Sandip University, Nashik — Final Year B.Tech Students
- ARCHITECTURE.md - System architecture with Mermaid diagrams
- RESEARCH_AND_DEVELOPMENT.md - R&D documentation
Created for Tesco Retail Media Hackathon 2025 by Team Sarthak.
RetailSync AI — Transforming Retail Media Creation