AgentCart

The WebMCP-powered marketplace where humans and AI agents shop together.

Comment

Inspiration

Online shopping involves many steps: searching for products, applying filters, checking specifications, comparing options, finding offers, adding items to a cart, and finally deciding whether to purchase.

We asked ourselves:

*What if an AI agent could actually work with a shopping website instead of simply telling the user what to buy? And can the work become easier for the users as, complex [part will be handled by the AI agent, and the approval part will be under the Humans. *

Traditional websites are primarily designed for human interaction. An AI agent may be able to read information or navigate the interface, but it does not have a reliable, structured way to use the website's capabilities.

This inspired us to build AgentCart, a WebMCP-powered marketplace where humans and AI agents can shop together.

Our goal was to explore what happens when a website is designed not only for humans, but also as an active tool interface for AI agents.

What it does

AgentCart allows a user to give an AI agent a natural-language shopping goal.

For example:

"Find me the best laptop for programming under ₹70,000. Prioritize performance and battery life."

The agent can then:

  1. Search available products
  2. Filter them according to the user's requirements
  3. Inspect product specifications
  4. Compare the strongest candidates
  5. Find the best available offer
  6. Add the selected product to the cart
  7. Calculate the final price
  8. Request human approval before completing the purchase

AgentCart currently exposes eight WebMCP tools:

  • search_products
  • filter_products
  • get_product_details
  • compare_products
  • find_best_offer
  • add_to_cart
  • calculate_cart_total
  • request_purchase_approval

The WebMCP integration is implemented using:

document.modelContext.registerTool()

A key part of AgentCart is human-in-the-loop control. The agent can research, compare, optimize, and prepare a purchase, but it cannot complete the simulated purchase without explicit human approval.

No real payment or transaction takes place.

How we built it

AgentCart was built using React, TypeScript, Vite, Tailwind CSS, and Zustand.

We created a structured electronics product catalog containing product information such as price, brand, category, rating, stock, specifications, features, and offers.

The WebMCP integration is implemented in the frontend using document.modelContext.registerTool(). Each tool has a defined name, description, input schema, and execution function.

We designed the tools around the actual shopping workflow rather than exposing only a single generic AI action.

The application also includes an Agent Activity panel that makes the agent's workflow visible to the user, for example:

search_products → filter_products → compare_products → find_best_offer → add_to_cart → request_purchase_approval

We used Git and GitHub for source control and deployed the application using Vercel.

The final purchase flow is simulated so that the complete human + agent interaction can be demonstrated safely.

Challenges we ran into

One of our biggest challenges was making WebMCP tool registration reliable.

Because the application can initialize more than once, we needed to prevent duplicate tool registrations. We implemented registration safeguards and checks for already-registered tools.

Another challenge was making the agent workflow respond differently to different natural-language requests. We did not want every prompt to produce the same demonstration.

We therefore implemented dynamic handling for:

  • Product categories
  • Budget limits
  • Ratings
  • Battery requirements
  • Cheapest-product requests
  • Comparison requests
  • Offers
  • Purchase and approval workflows

We also had to carefully separate agent autonomy from human control. The agent can perform research and prepare a cart, but the final consequential action requires explicit human approval.

Finally, we focused on making the WebMCP functionality understandable through the user interface instead of hiding the interaction behind the scenes. The Agent Activity panel helps users see what the agent is doing.

Accomplishments that we're proud of

We are proud that AgentCart goes beyond simply demonstrating that WebMCP tools can be registered.

We built a complete shopping workflow around multiple meaningful WebMCP tools, connecting product discovery, filtering, comparison, offer optimization, cart preparation, and human approval.

We are especially proud of the human + agent collaboration model. The agent handles the repetitive research and optimization work while the human remains responsible for the final purchase decision.

We also built the project as a working, deployed web application rather than only a technical proof of concept.

Most importantly, we created an experience where the WebMCP implementation directly changes what the website can do with an AI agent.

What we learned

Building AgentCart taught us that making a website agent-ready is very different from simply adding an AI chatbot.

We learned how WebMCP can allow websites to expose structured capabilities that AI agents can use directly.

We also learned that tool design matters. Clear tool names, descriptions, input schemas, and appropriate read-only or state-changing behavior are important for reliable agent interaction.

Another important lesson was the importance of human-in-the-loop design. Giving an agent the ability to research and prepare actions does not mean it should automatically perform every consequential action and the important action like the approval and payment processing should be taken by Human only.

We also learned how frontend state management, WebMCP tool execution, dynamic workflows, and user-facing activity visualization can be combined into one agent-ready web experience.

What's next for AgentCart

AgentCart currently focuses on demonstrating the core WebMCP-powered shopping experience with electronics.

The next step would be expanding the marketplace with more product categories and richer real-world data.

We would also like to explore more advanced agent capabilities such as personalized preferences, multi-item shopping goals, budget optimization, shipping comparisons, and more sophisticated approval controls.

Beyond shopping, the same WebMCP interaction pattern could be applied to other multi-step web experiences such as travel planning, restaurant reservations, service marketplaces, and productivity applications.

Our broader vision is a web where websites are not only pages that humans read and click, but active environments that AI agents can work with while humans remain in control.

Final Thought

Before WebMCP, an AI agent could tell you what to buy.

With WebMCP, the web can actually work with the agent.

AgentCart is our exploration of what that future could look like.

Built With

Share this project:

Updates

Submission history