Inspiration
Buying custom-sized home textiles (like made-to-measure sofa covers) online is notoriously frustrating. Standard sizes rarely fit perfectly, and conversational AI agents usually fail to help because they hallucinate prices—they simply don't know a specific store's proprietary pricing multipliers, material costs, or shipping weights. We wanted to bridge this gap. Our inspiration was to create a storefront where an AI agent isn't just answering questions, but is natively calculating, configuring, and building the perfect custom order alongside the user.
What it does
Al Falah Collection is a high-performance Next.js e-commerce platform that sells customizable home textiles. Through WebMCP, it exposes its complex backend logic directly to AI agents as structured tools.
A user can simply tell their AI, "I need a sofa cover measuring 75x30x24 inches." Instead of guessing, the AI uses our registered WebMCP tools to:
Search the local catalog for supported fabrics. Calculate the exact dynamic price using our volumetric algorithm. Estimate the weight-based tiered shipping cost. Add the precisely configured, custom-dimensioned item directly into the user's React shopping cart. Generate a one-click checkout link that dispatches the fully formatted order to the store admin via WhatsApp.
How we built it
We built the platform using Next.js 14 (App Router), TypeScript, and Tailwind CSS. To ensure hyper-fast, zero-latency tool executions for the AI agent, we bypassed external BaaS providers (like Supabase) in favor of a lightning-fast local SQLite (better-sqlite3) database for product querying and order reservations.
The core of our hackathon submission is the WebMCPProvider—a custom React Client Component nested inside our CartContext. On mount, it hooks into document.modelContext.registerTool(), safely exposing functions that allow the agent to mutate the local shopping cart state and execute complex pricing mathematics instantly.
Challenges we ran into
Type Safety for Emerging Standards: Because document.modelContext is a nascent standard, TypeScript natively threw errors. We had to write custom global type augmentations (src/types.ts) to ensure our provider remained strictly typed. State Syncing: Linking the AI agent's actions seamlessly into the existing React Context was challenging. We had to ensure that when an agent invoked add_custom_item_to_cart in the background, the UI (like the Cart Drawer) reacted and updated immediately for the human user without requiring a page refresh.
Accomplishments that we're proud of
We successfully took complex, proprietary business logic—specifically volumetric pricing calculations and tiered, weight-based shipping rules—and safely exposed them to conversational AI. The fact that an AI agent can now flawlessly quote, configure, and cart a made-to-measure sofa cover without hallucinating pricing is a massive leap forward for e-commerce user experience.
What we learned
We learned that the true power of WebMCP isn't just in helping agents read data—it's in allowing agents to safely mutate application state (like shopping carts) and execute localized business logic on behalf of the user. It effectively turns a passive website into a collaborative digital workspace.
What's next for Al Falah Collection
We plan to expand our WebMCP toolset to allow agents to handle post-purchase tracking natively, process returns, and intelligently suggest fabric swatches based on users uploading photos of their living rooms directly through the agent interface.
Log in or sign up for Devpost to join the conversation.