ShopFit

Inspiration

I’ve always wanted to dress well and feel confident in my style, but as a Software Engineer working in tech, my daily wardrobe was mostly casual and I never felt like I quite nailed the “put-together” look. I was willing to invest in clothes, but I struggled to pick pieces that truly suited me. Even when friends gave advice, I wasn’t always convinced — and ironically, the best items in my closet were ones they picked out for me, not ones I chose myself.

I tried online styling services too, but the recommendations felt generic and impersonal. I didn’t enjoy shopping or spending hours scrolling through endless options online, and I constantly felt unsure about what would actually look good on me.

And like so many people, I often found myself staring at a full wardrobe thinking, “I have nothing to wear.” Not because I didn’t own clothes — but because I didn’t know how to put them together in a way that felt stylish, intentional, and “me.” Most of us buy pieces in isolation, not outfits, so nothing really works together the way we imagine it will.

That’s what inspired me to create ShopFit. I wanted to solve this everyday struggle using AI — helping people like me, who don’t naturally have an eye for styling or who find shopping overwhelming, build confidence in their personal style. My goal is to make fashion feel accessible, personalized, and fun — without the guesswork. With ShopFit, you don’t just buy clothes… you build outfits, elevate what you already own, and walk out the door each day feeling like the best version of yourself.

What it does

ShopFit is a Chrome extension that transforms online shopping into a personalized style experience.

When users first open the extension, they upload a few photos of themselves wearing different outfits. Using the Chrome Built-in Prompt API, ShopFit analyzes these images to generate a custom Style Profile — identifying flattering color palettes, patterns, and styles that suit each user best.

Once your style profile is created, two key features are unlocked:

Virtual Try-On – Next to each item, an icon lets you preview how you’d look in that outfit. This feature uses the Gemini Developer API, and users can securely add their own API key to generate AI-based try-on images directly within the browser, without needing to navigate away from their shopping experience.

Smart Highlighting – When browsing fashion sites like H&M or Zara, turning on the ShopFit overlay allows the extension to detect product images on the page, assess them against your style profile, and score them using the Prompt API. Outfits that are a strong match are highlighted, while less suitable items are gently dimmed — helping you focus on what fits your look.

How we built it

To bring ShopFit to life, we combined several different APIs, focusing on making the entire experience seamless and user-friendly.

We used the Chrome Built-in Prompt API extensively. First, we leveraged it to analyze the images users upload of themselves in different outfits. This allows us to generate a personalized style profile by taking multiple input images and producing a tailored output that suggests color palettes, patterns, and styles that suit the user.

We then used the same Prompt API for the style analysis feature. As users browse fashion websites, the extension assesses product images and compares them to the user’s style profile. This lets us highlight matches and dim less suitable items in real time, directly on the shopping page.

For the virtual try-on functionality, we integrated the Gemini Developer API. Users can add their own Gemini API key to generate realistic images of themselves wearing selected outfits, giving them a personalized preview without leaving the browser. Generated images are cached so that they can be viewed at a later point while on the page without triggering aditional API calls.

We also implemented an integration with Firebase. This functionality in the future will allow users to sync their personal wardrobe via a connected mobile app built with React Native. This means the extension can access those wardrobe images to suggest how a user’s existing clothes might pair with new finds online.

In summary, we combined Chrome’s built-in Prompt AI, the Gemini Developer API, and Firebase to create a seamless, multi-modal, AI-powered fashion companion that works right in your browser.

Challenges we ran into

One of the most interesting challenges was generating high-quality, realistic images of the user actually wearing the selected outfit. Initially, the Gemini API often reproduced the user’s photo without applying the new outfit accurately. We discovered that providing Gemini with a descriptive text prompt about the outfit (in addition to the two input images) significantly improved the results. Even so, the quality can vary depending on the user’s photo and the product image, but it still provides a fast and seamless way for users to visualize outfits without leaving the page.

Another major challenge was dealing with the variety of website formats and DOM structures. Every shopping site presents its product images differently. For example, some sites like Zara use unique image carousels where images are layered and only a small viewport is visible at a time. This means that while the DOM may show many images, only a few are actually visible to the user, making it tricky to detect and analyze them in real time.

Additionally, some websites use lazy loading, where images aren’t immediately available in the page’s source. We had to implement background scripts and handle CORS (Cross-Origin Resource Sharing) security issues to fetch and analyze these images dynamically. This added complexity, as not all images could be processed at the same speed or in the same way.

Finally, there was a challenge of performance. Image analysis can take time, especially on less powerful devices, and we wanted ShopFit to feel responsive. For demonstration purposes, we focused on making the extension work smoothly on a single shopping site (H&M) and had to settle for sequential image loading rather than fully concurrent analysis. This allowed us to ensure a stable demo, even if it wasn’t as fast as we’d ultimately like it to be.

Accomplishments that we're proud of

What I’m most proud of is how I worked through the many technical challenges of making all these tools work seamlessly together. Building a Chrome extension that interacts dynamically with real-world websites was far more complex than I expected. Every website handles images, HTML layouts, and content loading differently — from how images are embedded to how elements appear in the DOM or load asynchronously.

Getting ShopFit to detect, analyze, and highlight fashion images across these varying structures required a lot of iteration and experimentation. Each time something broke on a new site, I learned a bit more about how browsers interpret web content, and how to adapt my code to handle those edge cases gracefully.

One of the other things that really excited me during development was realising the potential of connecting the extension to my react native mobile app using the same Firebase backend. It opened my eyes to the potential of combining the browser-based shopping experience with a user’s own personal wardrobe, enabling even more personalized and powerful recommendations. It felt like a big step toward realising what could really be done with the available technologies

What we learned

When I came into this competition, I had never created a Chrome extension before and hadn’t even heard of the built-in AI tools that Chrome offers. Discovering that I could use these secure, on-device AI models directly in the browser was a game-changer and opened my eyes to so many new application ideas.

The competition guidelines really encouraged me to try things I wouldn’t have otherwise thought of — like blending the Prompt API with the Gemini Developer API and exploring how to handle image inputs and outputs in new ways. Everything I did in this project was completely new to me, and it was a fantastic learning experience that has really expanded my understanding of what’s possible with AI in the browser.

What's next for ShopFit AI

Looking ahead, the next step for ShopFit is to fully unlock the potential of its connected mobile and browser experience. We’ve already built the foundation — a mobile platform linked to the Chrome extension through Firebase — and this was the first step toward creating a truly integrated styling experience.

The goal now is to make that connection even smarter: allowing users to sync their wardrobe from the mobile app and have the extension suggest new pieces that complement what they already own. For example, while browsing online, ShopFit might highlight a top that pairs perfectly with your favorite jeans, or let you know that the dress you’re looking at doesn’t match any shoes you currently have — so you might want to look for a pair to complete the look.

Naturaly we also plan to enhance the try-on generation quality, expand compatibility across more shopping websites, and explore real-time outfit planning with concurrent image processing. These next steps will help ShopFit evolve into a personalized, AI-powered fashion companion that works naturally across devices.

Built With

• firebase
• geminideveloperapi
• javascript
• node.js
• promptapi
• reactnative