AgentCart: WebMCP E-Commerce

Inspiration

Traditional e-commerce filtering is rigid, relying on endless checkboxes, sliders, and dropdown menus. We wanted to build an experience where you can just tell the store what you want, and the store adapts to you.

Why our use case is a strong fit for WebMCP

AgentCart is a perfect fit for WebMCP because it replaces complex UI navigation with natural language. By exposing search_products and add_to_cart as client-side tools, the AI agent acts as an integrated personal shopper. It instantly manipulates the live DOM based on complex user requests (e.g., "Find me a gift for a coffee lover under $50 and add it to my cart") instead of just printing out a text response.

How it creates a better user experience

Instead of an agent generating a static text list of products, the agent actively collaborates on the page. As the user chats with the AI, the actual product grid visually filters in real-time, and the cart badge updates instantly. It bridges the gap between conversational AI and traditional visual browsing, keeping the user grounded in a familiar visual UI.

What people and agents can do together that was difficult or impossible before

Previously, integrating AI deeply into a custom frontend required complex server-side APIs, database syncs, and dedicated browser extensions to manipulate the DOM. Now, humans and agents can collaborate entirely locally in the browser. The user drives the high-level intent ("I need an ergonomic setup"), and the agent executes the precise client-side JavaScript required to build that cart, side-by-side with the human.

How we implemented WebMCP

We implemented WebMCP using a purely client-side approach in a lightweight, zero-dependency environment. Inside our index.html, we check for document.modelContext and use registerTool to expose two functions:

1. search_products: Accepts a schema for keywords and max price, filters the local JavaScript catalog, and immediately triggers a DOM re-render of the product grid.
2. add_to_cart: Accepts a product_id, pushes it to a local state array, and updates the cart UI badge dynamically.

Built With

• artificial-intelligence
• css3
• html5
• javascript
• webmcp