WEBMCP CHALLENGE · SUBMISSION
Bazaar.
An agent-native store where humans and AI agents shop the same catalog together.
12 WebMCP tools
⚒
50 products · 6 categories
▣
Live: bazaar-web-mcp.vercel.app
⌘
🛒 Cart updated by agent
Built with Next.js 16 · Prisma · Neon · Vercel
BAZAAR · WEBMCP CHALLENGE
02 / 12
THE OPPORTUNITY
Shopping is tedious.
Agents are good at tedious.
WITHOUT AN AGENT
☻
☞
Click through dozens of products
✓
Read reviews and compare specs manually
🛒
Add each item one by one
$
Walk through checkout yourself
WITH A WEBMCP AGENT
✦
✓
“Find shoes under ₹2000” → instant filtered list
✓
“Compare top 2 headphones” → side-by-side table
✓
“Add the best one + a case” → done
✓
“Check out with COD” → order placed
Agent-native
✦
THE SHIFT
From browsing to asking.
BAZAAR · WEBMCP CHALLENGE
03 / 12
OVERVIEW
A complete, working e-commerce store — built for agents.
50 real products, full cart + checkout, 12 structured tools an agent can call directly.
✦
Single source of truth: human clicks and agent tool-calls hit the same Zustand store actions → identical code path.
⚒
12
WEBMCP TOOLS
search, compare, cart, checkout, orders.
▣
50
PRODUCTS
across Footwear, Electronics, Clothing, Home, Books, Beauty.
🛒
1
SHARED CART
human and agent edit the same cart in real time.
✓
100%
VERIFIED
console-proof + live agent demo.
BAZAAR · WEBMCP CHALLENGE
04 / 12
THE CONTRACT
Websites expose typed tools. Agents call them directly.
registerTool.js
WebMCP
document
modelContext
registerTool
name
"search_products"
description
"Search the catalog by text,
category, price range, brand, tag, sort."
inputSchema
type
"object"
properties
query
type
"string"
category
type
"string"
enum
"Footwear"
"Electronics"
"Clothing"
"Home"
"Books"
"Beauty"
maxPrice
type
"integer"
sort
type
"string"
enum
"relevance"
"price-low"
"price-high"
"rating"
"discount"
execute
async
input
/* ... */
⛨
Typed contract — inputSchema validates every call
Wrong shape or bad enum value → the call is rejected before execute() runs.
✦
No scraping — agent uses the real API
Same data path the UI uses, surfaced as first-class tools — no DOM parsing, no brittle selectors.
▤
Spec-aligned — webmachinelearning.github.io/webmcp
Implements document.modelContext.registerTool() as proposed in the WebMCP spec.
BAZAAR · WEBMCP CHALLENGE
05 / 12
ARCHITECTURE
One code path for humans and agents.
LAYER 1 · AGENT SURFACE
document.modelContext
registerTool() ×12
logged wrapper
ChatGPT in-app browser ·
Chrome + webmcp flag
▼
LAYER 2 · UI
Next.js 16 + shadcn
Store header
Product grid
Cart drawer
Checkout
Agent activity panel
WebMCP info dialog
▼
LAYER 3 · SOURCE OF TRUTH
Single, shared
Zustand store — addToCart / updateCartItem / checkout / getRecommendations …
↳ Human clicks → store action
Agent execute() → store action ↰
▼
LAYER 4 · PERSISTENCE
REST API (App Router)
Prisma ORM
Neon serverless Postgres
Vercel deploy
BAZAAR · WEBMCP CHALLENGE
06 / 12
TOOL SURFACE
12 tools cover the full shopping journey.
list_categories
Categories with item counts
CATALOG
search_products
Filter by text / price / brand / tag / sort
CATALOG
get_product_details
Full product info by id
CATALOG
compare_products
Side-by-side comparison table
CATALOG
get_recommendations
Personalized picks from cart
CATALOG
add_to_cart
Add to shared cart (tagged agent)
CART
get_cart
Cart contents + totals + savings
CART
update_cart_item
Change a cart item quantity
CART
remove_cart_item
Remove a single item
CART
clear_cart
Empty the cart
CART
checkout
Place order with shipping + payment
ORDER
get_order_history
Show past orders
ORDER
✦
Every call is wrapped → logged to the Agent Activity feed (tool, input, result, duration).
BAZAAR · WEBMCP CHALLENGE
07 / 12
AGENT FLOW
“Find shoes under ₹2000 and add the cheapest.” → one turn.
1
search_products
query=shoes, maxPrice=2000
→2 products found
2
compare_products
sort by price asc
→Everyday Slip-Ons ₹999 cheapest
3
add_to_cart
productId, quantity=1
→Cart badge empty → 1
4
get_cart
verify contents
→1 item · ₹999 · addedBy=agent
OPTIONAL
5
checkout
address + COD
→order confirmed
HUMAN SEES IT LIVE
Same cart.
Same UI.
Real-time.
🛒 cart badge updates
🤖 item tagged added by agent
📋 activity panel logs each call
Same store actions the UI uses — no separate agent path.
BAZAAR · WEBMCP CHALLENGE
08 / 12
COLLABORATION
Both edit the same cart. You always know what’s whose.
HUMAN
☻
Clicks the UI
● Browse grid · drag · click Add
● Edit qty · remove · checkout
● Sees agent changes live
AGENT
✦
Calls tools
● search_products / compare
● add_to_cart / update_cart_item
● checkout end-to-end
▼
▼
SHARED CART
🛒
3 items · subtotal ₹2,247
👟
Everyday Slip-Ons
×1 · ₹999
ADDEDBY: AGENT
📕
Atomic Habits
×1 · ₹449
ADDEDBY: HUMAN
🎧
AirBeats Pro
×1 · ₹799
ADDEDBY: AGENT
#
lastActor field on every item → “added by agent” tag in the UI. No confusion, full transparency.
BAZAAR · WEBMCP CHALLENGE
09 / 12
VERIFIED
Prove it in the console — not just a green badge.
BROWSER · CONSOLE
DevTools
> Object.keys(window.bazaar.tools)
["list_categories","search_products",
"get_product_details","compare_products",
"get_recommendations","add_to_cart",
"get_cart","update_cart_item",
"remove_cart_item","clear_cart",
"checkout","get_order_history"] // 12 tools ✅
> await window.bazaar.test()
[bazaar.test] 1/4 search_products {query:"shoes",maxPrice:2000}
→ 2 shoes found
[bazaar.test] 2/4 add_to_cart {productId:...}
→ cartTotal: 999 · cartItemCount: 1
[bazaar.test] 3/4 get_cart {}
→ itemCount:1 · subtotal:999
[bazaar.test] 4/4 ✓ done
🛒
Cart badge: empty → 1
Live UI update
🤖
Item tagged “added by agent”
Transparency
📋
Activity feed logged 3 calls
Audit trail
✓
Same execute() a ChatGPT in-app browser calls.
✦
window.bazaar.test() runs the real tools — same execute() a ChatGPT in-app browser calls.
BAZAAR · WEBMCP CHALLENGE
10 / 12
TECH STACK
Modern, production-grade, deploy-ready.
✦
6 layers
FRONTEND
✦
Next.js 16
(App Router)
React 19, Tailwind 4, shadcn/ui
STATE
✦
Zustand
Single source of truth · shared by UI + agent
DATABASE
▦
Neon serverless
Postgres
Prisma ORM · cloud, scales to 0
DEPLOY
➤
Vercel
Live: bazaar-web-mcp.vercel.app
STANDARDS
✓
WebMCP spec
document.modelContext.registerTool
TOOLING
⚒
z-ai SDK · ffmpeg
TTS voiceover + demo video pipeline
⚡
No adapter hacks
— Postgres is native to Prisma. One
DATABASE_URL
env var works locally and in production.
BAZAAR · WEBMCP CHALLENGE
11 / 12
HOW TO TEST
Judges can verify in 4 steps.
✓
Console-proof
1
↑
DEPLOY
Push to GitHub → import to Vercel. One env var: DATABASE_URL (Neon string). 2-minute deploy.
2
✦
OPEN IN A WEBMCP BROWSER
ChatGPT in-app browser (native), OR Chrome with chrome://flags/#enable-webmcp-testing → Enabled → Relaunch.
3
✓
BADGE TURNS GREEN
On load, Bazaar registers 12 tools via document.modelContext. Header badge flips “Preview mode” → “WebMCP active”.
4
✦
ASK THE AGENT
“Find running shoes under ₹2000 and add the cheapest to my cart.” Watch the cart update live + activity panel log each call.
NO WEBMCP BROWSER?
Console fallback.
Run await window.bazaar.test() in the console — same tools, instant proof.
> await window.bazaar.test()
// 4 steps run live
✓ cart: empty → 1
BAZAAR · WEBMCP CHALLENGE
12 / 12
JUDGING CRITERIA
Built to win on every criterion.
✦
WEBMCP LEVERAGE
01
12 non-trivial tools
Genuine full-store implementation, spec-aligned.
➤
EXECUTION
02
Live deployed app
Working cart + checkout + orders · 50 real products.
↗
POTENTIAL IMPACT
03
Massive real audience
E-commerce is a real, massive audience; agents cut shopping friction.
✦
CREATIVITY & AMBITION
04
Shared human + agent cart
Per-item “added by agent” audit trail.
▶
Try it:
bazaar-web-mcp.vercel.app
✦
Console:
await window.bazaar.test()
WebMCP Challenge · Bazaar · Thank you
/ end