ShopPulse

• 

  Inventory procurement matrix, stock risk warnings, and econometric Price Elasticity simulator.

• 

  Slide-over developer drawer displaying all 7 registered W3C tools and real-time audit logs.

• 

  Live execution of document.modelContext.configure_bundle() creating the 4-item Ergonomic Office Suite with a 15% discount.

• 

  52-product catalog, pagination controls, 1-click curated preset chips, and the live Order Workspace.

• 

  3D synaptic wireframe canvas, clean header, WebMCP status badge, and mode switcher.

Inspiration

Today's web apps are built for human clicks and mouse cursors. When autonomous AI agents try to interact with web stores, they're forced to rely on fragile screen-scraping and brittle DOM selectors that break whenever a CSS class changes.

With the emerging W3C Web Model Context Protocol (WebMCP), websites can expose structured, type-safe tools directly to agents inside the browser. We built ShopPulse to show what a real, production-grade agent-native commerce platform looks like.

What it does

ShopPulse unites consumers, merchant operators, and autonomous browser agents in a single, responsive web application:

• For Shoppers: An AI Co-Pilot uses document.modelContext.configure_bundle to dynamically curate multi-item bundles with instant volume discounts based on natural language requests.
• For Merchants: A command center with automated purchase order dispatching and econometric price elasticity simulation.
• Enterprise Safety: A 3-tier permission model requiring explicit human approval on high-risk operations (bulk restocking, financial checkouts).
• Dual WebMCP Implementation: Supports both imperative JavaScript tool registration (registerTool) and declarative HTML attributes (toolname, tooldescription).

How we built it

• Framework: Next.js 14 App Router with React and TypeScript.
• Agent Layer: W3C WebMCP draft specification with structured JSON Schema tools.
• Visuals: Three.js interactive 3D particle and mesh acceleration.
• Styling: Tailwind CSS with custom glassmorphism and executive typography.

Challenges we ran into

• Designing a non-blocking Human-in-the-Loop workflow that safely pauses async tool execution while preserving the browser session.
• Seamlessly blending agent actions with live UI state updates without reloads.

What's next for ShopPulse

• Direct integration with Chrome's built-in on-device Gemini Nano via window.ai.
• WebMCP-native multi-store checkout federation.

Built With

• next.js
• node.js
• react
• tailwind-css
• three.js
• typescript
• webmcp