BopIt

From Content to Commerce.

Comment

Inspiration

We have all paused a video and wondered, "Where can I get that?" It could be a camera in a creator's studio, a jacket in a travel vlog, or a lamp in a desk setup. Finding that exact product often means searching comments, checking descriptions, taking screenshots, and trying different keywords. We wanted to make this process easier. We also realised that creators need better ways to understand how their content influences audience interest and shopping decisions. That inspired us to build BopIt : connecting content, creators, product discovery, and commerce in one experience.

What it does

BopIt is an AI-powered content-to-commerce platform with three main experiences:

1. Chrome Extension

BopIt transforms paused video frames into interactive product discovery. It identifies visible objects, highlights them, and lets viewers select products they are interested in. Through Channel3, users can explore matching products, specifications, variants, seller offers, similar products, and price history.

Key features include:

  • Contextual Search: Find alternatives using requests such as "something similar, but black and under $100."
  • Setup Recreation: Select multiple objects and explore a possible combination within a budget.
  • Personalised Discovery: Use preferences, owned-product details, and creator transcripts.
  • Compatibility Advisory: Identify potential camera and lens mismatches.
  • Checkout: Review a fresh quote and complete payment through PayPal Sandbox.

2. Creator Intelligence

Helps creators understand reach, engagement, video performance, brand opportunities, creator–brand matching, and campaign analytics.

3. Commerce Intelligence

Uses Channel3 to explore product catalogues, pricing, seller offers, availability, and price trends. It also analyses shopper interactions such as product selections, clicks, and cart additions.

How we built it

We developed the Chrome Extension using Chrome Manifest V3, JavaScript, HTML, and CSS, supported by a Node.js backend.

Our technology stack includes:

  • Google Gemini: Visual recognition, object analysis, speech transcription, and shopping request interpretation.
  • SlimSAM: Refines detected regions into object-shaped highlights.
  • Channel3: Product discovery, catalogue details, variants, seller offers, similar products, and historical pricing.
  • PayPal Orders v2: Sandbox order creation and payment capture, with server-side quote validation and payment verification.
  • React: Powers our Creator and Commerce Intelligence dashboards.
  • AG Grid: Interactive, searchable, sortable, and filterable data tables.
  • AG Charts: Visualises complex datasets through meaningful charts.
  • AG Studio: Its native Agent Framework enables natural-language analytics through five built-in agents: Lead, Data, Planning, Page, and Widget.

We also implemented persistent commerce interaction events to connect shopper activity with our Commerce Intelligence dashboard.

Challenges we ran into

One of our primary challenges was integrating multiple technologies and external data sources into a reliable, unified experience. Maintaining user intent during contextual product searches was particularly challenging. For instance, when a user requests a black alternative to an orange shirt, the system must retain the original product category while accurately adapting the colour preference. Another key challenge was ensuring the reliability of AI-generated results. Visual recognition can identify an object's appearance, but cannot always establish its exact brand, model, or compatibility. We therefore focused on distinguishing verified information from AI-generated inferences to avoid misleading recommendations. We also encountered integration challenges involving API failures, recognition latency, browser capture limitations, outdated search responses, changing seller offers, and payment retries. Addressing these required continuous refinement of our backend workflows, error handling, and overall system architecture.

Accomplishments that we're proud of

We successfully connected video-based product recognition, contextual product discovery, product comparison, and sandbox checkout into one working Chrome Extension. We also built Creator Intelligence and Commerce Intelligence as complementary dashboards, bringing creator analytics, monetisation insights, and shopper behaviour into one ecosystem. Integrating AG Studio's native Agent Framework was another major achievement, allowing creators to explore datasets, ask questions in natural language, and generate dashboard visualisations. Most importantly, we created an experience where discovering a product can begin with something as simple as selecting it in a video.

What we learned

We learned that recognising an object and identifying the exact product are two different challenges. Meaningful product discovery requires reliable catalogue information, contextual understanding, and careful handling of uncertainty. We gained practical experience with multimodal AI, API integrations, Chrome extensions, data visualisation, agent-based workflows, and payment systems. Working with AG Grid, AG Charts, and AG Studio also showed us how interactive data exploration and AI-assisted analytics can work together to make complex information easier to understand. Above all, we learned that good technology is not just about adding features; it is about making real user experiences simpler.

What's next for BopIt

We plan to deploy a hosted backend, publish the Chrome Extension, improve recognition speed, and support more video experiences. We also want to strengthen creator data integrations, connect analytics to real engagement events, and build more reliable purchase attribution. Our long-term vision is to create a transparent content-to-commerce ecosystem where viewers can discover products effortlessly and creators can understand and benefit from the influence of their content.

Built With

Share this project:

Updates

Submission history