ShopWise AI

A WebMCP-powered collaborative shopping platform where humans browse visually while AI agents discover real tools to search, compare products, and manage shopping carts.

Comment

Inspiration

Online shopping is highly visual and interactive for people, but traditional websites are often difficult for AI agents to use reliably. An agent may understand what a user wants, such as a powerful programming laptop under a specific budget, but interacting with a website through visual elements alone can be inefficient and fragile.

I wanted to explore how WebMCP could make a website expose its real capabilities directly to AI agents while preserving a great experience for human users.

That idea became ShopWise AI — a collaborative shopping experience where humans browse products visually while AI agents can discover structured tools to search products, inspect details, compare options, and manage a real shopping cart.

What it does ShopWise AI is a modern AI-commerce web application with a product catalog across categories including laptops, smartphones, headphones, and smartwatches.

Human users can:

  • Browse a large product catalog visually
  • Search for products
  • Filter by category and price
  • Sort products
  • View detailed product information
  • Compare multiple products
  • Add products to a shopping cart
  • Change quantities and remove items

AI agents in a compatible WebMCP environment can interact with the same real application capabilities through native WebMCP tools.

The six tools implemented are:

  1. search_products
  2. get_product_details
  3. compare_products
  4. add_to_cart
  5. get_cart
  6. clear_cart

How we built it ShopWise AI was built as a React and TypeScript application using Vite.

The application uses:

  • React
  • TypeScript
  • Vite
  • CSS
  • Lucide React icons
  • Vercel for deployment
  • GitHub for source control
  • Native browser WebMCP APIs

The product catalog and shopping logic run entirely in the frontend with real local application state.

The UI includes a premium dark interface with responsive product cards, search and filtering controls, a shopping cart drawer, product comparison functionality, and an Agent Collaboration panel.

Challenges we ran into One of the biggest challenges was connecting WebMCP tools to the real React application state.

The WebMCP tools needed to perform actual operations such as searching products, comparing products, adding items to the cart, and clearing the cart. We had to ensure these operations used the same real business logic and state as the visual user interface instead of returning simulated or hardcoded results.

Another challenge was avoiding stale React state inside WebMCP tool callbacks. Since React components re-render as application state changes, the WebMCP integration needed access to the latest product, filter, cart, and comparison state.

We also needed to prevent duplicate tool registration caused by React StrictMode and safely detect whether the current browser supported WebMCP.

Finally, the application had to remain fully functional in ordinary browsers where document.modelContext is unavailable. We implemented graceful feature detection so the website continues working normally while accurately reporting WebMCP availability.

During deployment, we also verified that the production build succeeded and that the live Vercel application could load correctly without environment-specific dependencies.

Building ShopWise Al helped me understand how websites can evolve beyond interfaces designed only for humans.

WebMCP makes it possible for websites to expose structured, meaningful capabilities to Al agents while keeping the existing human interface intact. I learned the importance of: Designing tools around real user problems Connecting agent capabilities to real application logic Managing application state safely Providing structured inputs and outputs Designing human and Al collaboration instead of replacing one with the other Building graceful fallbacks for unsupported browsers What's next

Future versions of ShopWise Al could support:

Personalized shopping preferences

Persistent shopping carts

User accounts

Real e-commerce APIs

Product recommendations

Multi-agent shopping assistance

Price tracking

Availability monitoring

Built With

Share this project:

Updates

Submission history