Inspiration

Finding a useful deal should take less effort than comparing dozens of browser tabs. I built DiscountHub to bring product discounts, promo codes, and store offers into one place.

For this challenge, I wanted browser agents to use that catalogue directly, while keeping shoppers involved in every decision.

What it does

DiscountHub WebMCP gives compatible browser agents four tools:

  • search_deals — search product discounts with optional filters.
  • find_promo_codes — find coupon codes and their available conditions.
  • get_store_offers — retrieve a store's product discounts and promotions.
  • get_best_deals — find the largest percentage discounts.

Agents receive structured results, and the same offers appear on the website using DiscountHub's existing cards. A shopper can review prices, compare offers, copy a coupon, and choose which store link to open.

The tools support relevant filters such as keywords, country, store, price, and minimum discount. Prices and budgets are in USD. Coupon codes come from the catalogue; they are not verified at checkout.

Why WebMCP

Shopping requests combine several constraints: what someone wants, their budget, and the market they are shopping in.

WebMCP gives the browser agent explicit tools and input schemas for these requests. The agent can retrieve structured offer data without extracting it from page layouts.

The visible result matters just as much: people can inspect the offers returned by the agent and continue browsing from the same page. Tool calls search the catalogue; shoppers decide whether to visit a store.

How I built it

Existing foundation: DiscountHub already had a public website, a Flutter application, a Python/FastAPI backend, a SQLite catalogue, automated offer processing, and its own AI Finder.

New work for this challenge: I added native WebMCP registration, four tool definitions, validated inputs, structured responses, and shared on-page results. The implementation uses document.modelContext where available, with support for the earlier navigator.modelContext API.

The JavaScript adapter reuses the existing public deals and promotions endpoints. It handles pagination, timeouts, cancellation, and partial failures. It excludes expired or future-dated offers and coupons without codes. Older requests cannot overwrite newer visible results.

The website and WebMCP integration live in a separate repository from the backend and mobile application. Both repositories include MIT licenses.

The WebMCP implementation and dated commit history document the challenge addition.

Challenges

The main challenge was making tool results dependable across browser API differences and changing catalogue data. Testing required both native tool execution in Chrome and checks against the live API.

I also needed to preserve the familiar browsing experience while making agent results visible and understandable.

Accomplishments

All four tools were exercised through native browser execution. In the recorded live demo, Gemini uses Chrome's Model Context Tool Inspector to call search_deals for three headphone offers in the United States, under fifty dollars, with at least twenty percent off.

Three offers appear on the page, giving the shopper and the agent a shared view of the results.

What I learned

A useful agent integration needs clear tool boundaries and visible outcomes. Structured data helps the agent act reliably; shared results help the person understand and evaluate what happened.

What's next

I plan to improve multilingual catalogue search, add clearer country and availability information, and make it easier to refine and compare an agent's results.

Built With

Share this project:

Updates

Submission history