IntentCart — Agent-Native Collaborative Shopping

Shop by intent, not endless searching. IntentCart lets AI agents research, compare, and plan purchases through WebMCP while humans review and approve every recommendation.

Comment

IntentCart 🛒🤖

AI researches. You decide.

IntentCart is an agent-native collaborative shopping experience built with WebMCP.

Instead of endlessly searching through products, users can simply describe what they want. For example:

“Build me a coding setup for college under ₹70,000.”

The AI agent can then research products, compare options, create a shopping plan, and calculate the total budget — while keeping the human in control of the final decision.

💡 Inspiration

Online shopping can involve searching through dozens of products, comparing specifications, checking prices, and trying to stay within a budget.

I wanted to explore a different experience where an AI agent could actually interact with the shopping website and help with the research and planning, instead of just acting like a chatbot.

🚀 What IntentCart Does

IntentCart provides 8 native WebMCP tools:

  • 🔎 Search products
  • 📋 Get product details
  • ⚖️ Compare products
  • 🛒 Add products to cart
  • ❌ Remove products from cart
  • 🛍️ View the cart
  • 💰 Calculate the budget
  • 🧠 Create a shopping plan

For example, the agent can create a complete college coding setup while staying within a ₹70,000 budget.

Each recommended product includes a “Why Selected” explanation so the human can understand the recommendation.

👤 Human Approval

The AI does not automatically make the final shopping decision.

The agent creates a proposal first. The human reviews the products, reasons, and budget, then explicitly clicks:

“Approve & Add to Cart”

Only after approval are the products added to the collaborative cart.

This creates a simple principle:

AI handles the research and planning. Humans make the final decision.

🔧 How It Was Built

IntentCart was built using:

  • React
  • TypeScript
  • Vite
  • WebMCP
  • Native browser WebMCP APIs
  • HTML5
  • CSS3

The application uses a shared cart state so that changes made through the website and WebMCP tools remain synchronized.

An Agent Activity timeline also shows tool activity as the agent interacts with the application.

🧩 Challenges

One of the biggest challenges was designing a shared state that could work consistently between the normal UI and agent tool calls.

Another important challenge was creating a safe approval flow where the AI can propose actions without automatically making purchasing decisions.

I also had to handle WebMCP tool registration carefully to avoid duplicate registrations during React development and remounts.

🏆 What I'm Proud Of

  • Native WebMCP tool integration
  • Agent-accessible shopping capabilities
  • Human approval before cart changes
  • Real-time shared cart state
  • Product comparison and budget planning
  • Clear visibility into agent activity

📚 What I Learned

This project helped me understand how to build for the agent-native web.

Instead of designing only for humans clicking buttons, I learned how to expose meaningful application capabilities as structured tools that AI agents can use.

I also learned that good agent experiences need a balance between automation and human control.

🔮 What's Next

Future versions could include:

  • More personalized shopping preferences
  • Larger and real-world product catalogs
  • Smarter recommendations
  • More advanced comparison features
  • More granular human approval controls
  • Multi-user collaborative shopping

👩‍💻 Built By

Nirmala Devi Patel

Built for the OpenAI WebMCP Challenge 2026.

Built With

  • agenticai
  • ai
  • artificial-intelligence
  • e-commerce
  • human-aicollaboration
  • javascript
  • openai
  • react
  • tailwind
  • typescript
  • vercel
  • vite
  • webdevelopment
  • webmcp
Share this project:

Updates

Submission history