CartPilot — Agent-Native WebMCP Store

Where people and AI browser agents shop together using the open WebMCP standard.

Comment

Inspiration

Traditional web browsing leaves AI agents guessing: they scrape brittle HTML class names, guess coordinates from screenshots, and hallucinate button clicks. A single CSS tweak breaks the agent's workflow.

CartPilot was born from a fundamental question: What if online stores treated AI browser agents as first-class citizens alongside human shoppers?

Built for The WebMCP Challenge, CartPilot implements the emerging W3C / Chrome WebMCP standard, giving browser agents (like ChatGPT's in-app browser or Chrome with --enable-webmcp-testing) direct, deterministic API contracts via document.modelContext.registerTool.

What it does

CartPilot transforms the e-commerce shopping experience into a collaborative human-agent workflow:

  1. Native WebMCP Tool Provider: Exposes 5 structured client tools (search_products, filter_by_specs, check_compatibility, stage_cart_and_apply_coupon, get_cart_summary) directly to the browser runtime.
  2. Autonomous Multi-Tool Chains: Enables agents to handle complex, high-level requests (e.g. "Assemble a silent Mac coding setup", "Luxury 5K workstation", or "Setup under $500") and sequentially execute search, technical compatibility analysis, and bundle staging.
  3. Reactive Hardware Synergy Badging: When compatibility checks pass (like 140W Thunderbolt 4 host power or low-noise Topre switches), glowing verified badges are injected in real time directly onto product cards.
  4. Automated Checkout Staging: Adds complete hardware setups to the cart, automatically applies promotional discount codes (like AGENT15 for -15%), and persists everything across page reloads via LocalStorage.
  5. Live WebMCP Inspector & Telemetry: Features an on-screen console displaying active registered schemas and live bidirectional execution telemetry for developers and judges.

How we built it

  • W3C WebMCP Standard Bridge: Implemented document.modelContext.registerTool with JSON Schema input definitions, typed return payloads, and bi-directional event dispatching.
  • Zero-Dependency Architecture: Built with pure modern vanilla JavaScript (ES modules), semantic HTML5, and CSS variables for lightning-fast sub-50ms loading times without bulky runtime frameworks.
  • Hardware Synergy Engine: Deterministic rule-based invariant validator that checks port bandwidth, host power delivery (PD 3.1), and acoustic characteristics.
  • Production-Grade Catalog: Curated 24 high-end developer and creator hardware devices with real-world technical specifications and high-resolution studio photography.
  • Edge Deployment: Zero-configuration instant deployment on Vercel's global CDN.

Challenges we ran into

Designing an agentic storefront that feels natural for BOTH human users and AI agents was our biggest challenge. We didn't want a headless API with no interface, nor an opaque chat window hiding the store. We solved this with the "CartPilot Agent Dock" — a floating command bar that allows human shoppers to trigger complex multi-tool autonomous workflows while watching the UI reactively update in real time.

Accomplishments that we're proud of

  • 100% adherence to the emerging W3C WebMCP specification.
  • Zero external API keys needed: judges and users can run and test all tools natively without rate limits or subscription costs.
  • Seamless LocalStorage persistence ensuring user shopping carts and agent-applied coupons survive page refreshes.
  • Sub-50ms instantaneous execution speed on Vercel Edge.

What we learned

We learned that treating browser AI models as deterministic tool callers rather than fallible DOM scrapers fundamentally changes web architecture. By shifting from unstructured HTML scraping to structured schema registration via document.modelContext, web applications become dramatically faster, safer, and 100% reliable for agentic automation.

What's next for CartPilot — Agent-Native WebMCP Store

  • WebMCP-native Shopify Liquid & WooCommerce plug-and-play drops.
  • Multi-agent negotiation: letting personal shopping agents bargain bundles with store discount protocols.
  • Automated returns and warranty telemetry queries through standardized modelContext tools.

Built With

Share this project:

Updates

Submission history