SmartCart

Inspiration

Inspired by the WebMCP standard to reimagine e-commerce from the ground up, what if websites exposed structured tool APIs directly to AI agents while humans and agents collaborate seamlessly in real time? That inspiration gave birth to SmartCart Fashion AI.

How we built it

WebMCP Protocol Integration (document.modelContext): implemented the official WebMCP standard via document.modelContext.registerTool({ name, description, inputSchema, execute }), registering 11 structured tools for catalog search, dynamic outfit generation, wardrobe memory retrieval, promo code application, and secure checkout.

Reactive State Architecture: Built a lightweight client-side state store using the Observer (Pub/Sub) design pattern, enabling live synchronization across the storefront, cart, budget meter, and telemetry stream without external framework bloat.

Persistent Memory Layer: Leveraged the localStorage API to serialize and recall user styling preferences, brand affinities, and size profiles seamlessly across browser sessions.

Modern UI Design System: Crafted a fully responsive interface using Vanilla CSS Glassmorphism, custom CSS tokens, modern Google Fonts typography (Outfit, Inter, JetBrains Mono), and micro-animations.

Challenges we ran into

Algorithmic Look Coordination: Building a dynamic outfit generator that balances style archetype constraints, budget caps, color harmony, and size matching while guaranteeing unique combinations on every invocation without hardcoded lists. Balancing Autonomy with Safety: Designing a seamless Human-in-the-Loop security mechanism where the agent can assemble carts and calculate discounts autonomously, but is strictly gated from executing financial payments without human approval.

Accomplishments that we're proud of

100% Native WebMCP Conformance: Registered 11 fully functional tools with detailed JSON schemas adhering strictly to the hackathon specification.

Massive 44+ Multi-Brand Catalog: Successfully categorized and styled 11 shirts, 11 pants, 11 shoes, and 11 accessories from top global fashion brands.

Cryptographic HITL Checkout Guardrail: Created an intuitive authorization workflow that proves agentic commerce can be both powerful and safe.

What we learned

How WebMCP transforms the open web into an agent-accessible ecosystem far superior to traditional brittle screen scraping.

How to structure clean tool definitions, strict input schemas, and deterministic return payloads for LLMs.

Built With

• algorithmic
• api
• engine
• github
• html/css
• javascript
• localstorage
• recommendation
• webmcp