Vishop

• 

  Main Dashboard - Manage your fashion wishlist effortlessly, from any online store, all in one smart dashboard

• 

  AI Product Description - Get instant AI descriptions to find similar products with ease

• 

  AI Outfit Suggestions - Discover outfit ideas automatically matched to your favorite pieces

• 

  Outfit Check - Evaluate your outfit’s harmony with AI-powered style feedback

• 

  AI Inside Chrome - Gemini Nano Inside, AI that runs directly in your browser

Inspiration

While exploring productivity tools for creating wishlists, I noticed a gap: there was no universal shopping cart or centralized tool that worked seamlessly across online stores. Most solutions were either overly complex or lacked a focused purpose. I wanted to tackle this problem in a concrete and personal way—by helping people manage fashion shopping wishlists efficiently and enjoyably.

What it does

Vishop helps users centralize, organize, and get guidance on their fashion shopping. With a simple right-click on any product image, users can add items to their wishlist. The AI then automatically:

• Generates a clear description of the item.
• Suggests similar products.
• Recommends compatible outfits.
• Evaluates outfits and provides actionable feedback on how the pieces work together. The goal is to give users not just a place to save items, but a thoughtful assistant that adds context and value to their choices.

How we built it

Vishop is a Chrome Extension built with Manifest V3, designed around a decoupled architecture to keep core responsibilities cleanly separated.

1. Architecture:
2. Service Worker (background.js): Handles context menus, lifecycle events, user actions, and inter-script communication.
3. Offscreen Document (offscreen.js): Runs Gemini Nano for all AI tasks (image description, text extraction, outfit evaluation), since service workers cannot access the DOM.

4. Dashboard (wishlist.html/js/css): Displays the wishlist, supports filters, outfit building, and theme toggling.

5. “Smart Add” Workflow: When a user right-clicks an image and selects Add to Wishlist:

6. The service worker captures the image and page context.

7. A content script extracts text from the page.

8. The offscreen AI generates structured product data (type, price, tags).

9. All data and images are stored in chrome.storage.local, and the extension badge confirms success.

10. Outfit Builder & AI Stylist: Users can assemble outfits from their wishlist. The app ensures every item has an AI-generated description. Once complete, these descriptions are sent to Gemini Nano. Acting as a critical fashion stylist, the AI scores outfit harmony (0–100) and provides constructive feedback, displayed with an animated gauge in the UI.

Challenges we ran into

Coordinating the dashboard, service worker, and offscreen AI was challenging, especially for the Check Outfit feature with multiple AI round-trips. We solved race conditions using a promise-based flow and polling, ensured reliable JSON outputs through precise prompts and validation, and built a reactive vanilla JS UI synced with chrome.storage for smooth, stateful updates.

Accomplishments that we're proud of

Building Vishop end-to-end entirely within Chrome was an incredibly enriching experience. Making multiple AI features work seamlessly together while staying flexible and unconstrained by external costs thanks to Gemini Nano running directly in the extensionwas both challenging and deeply rewarding.

What we learned

This project was a deep dive into practical applications of on-device large language models. I learned how to initialize Gemini Nano, craft task-specific prompts, and handle both text and image inputs effectively. On the front-end, I challenged myself to build a polished, feature-rich UI without a heavy framework. Leveraging elements, CSS variables for theming, and scoped event listeners, I created a fast, maintainable interface that I’m genuinely proud of.

What's next for Vishop

The next step is to make the extension even smarter:

• Implement a background process to detect price drops and notify users.
• Introduce “Collections” or “Boards” for grouping items by theme (e.g., Summer Vacation Outfit or Formal Event).
• Enhance recommendation and variant features by directly sourcing and displaying related products. These improvements aim to make Vishop not just a wishlist tool, but a proactive, fashion-savvy companion.

Built With

• css
• html
• javascript
• promptapi