StyleMate

Your AI personal stylist that understands your style, searches the web, compares products, and builds your outfit using WebMCP.

Comment

Inspiration

Have you ever spent 30 minutes shopping online just to find one good outfit?

I do.

Sometimes I even ask ChatGPT, "Does this shirt look good on me?" After using AI so much, it probably knows more about my style than my girlfriend does.

Sad, but true. 😄

That made me think:

If AI already understands me, why am I still doing all the searching myself?

That's how StyleMate started.

We wanted to build a shopping experience where you don't have to think like a search engine. You can simply tell the agent what you're looking for, and it can understand your preferences, find the right products, and help you build your outfit.

What it does

StyleMate is an AI-powered personal stylist built for fashion shopping.

Instead of searching through hundreds of products and manually applying filters, you can simply give StyleMate a natural-language request.

For example:

"I'm 5'7", I need a formal outfit for office — a shirt, trousers and shoes. My shirt size is 40, trouser waist is 32, shoe size is 9, and my budget is around ₹10,000."

StyleMate can understand the request along with the user's existing style profile.

It can then:

  • Understand the user's style preferences
  • Find personalized recommendations
  • Search the product catalog
  • Compare products
  • Check size and inventory availability
  • Build a complete outfit
  • Add selected products to the cart

The interesting part is that the AI doesn't just recommend products.

It can actually interact with the website through WebMCP.

How we built it

Our main idea was:

One brain, two front doors.

A user can interact with StyleMate through the normal website UI, while an AI agent can interact with the same application through WebMCP.

Both use the same underlying product and business logic.

For the agent experience, we exposed purpose-built WebMCP tools:

  • getUserStyleProfile — read the user's style preferences
  • getRecommendations — find suitable products
  • searchProducts — search the product catalog
  • compareProducts — compare product options
  • checkInventory — verify availability
  • addToCart — add selected products to the cart

We also use browser page controls to update the visible website, show products, display confirmation dialogs, navigate to the cart, and keep the user involved in the process.

The flow is simple:

User intent → AI reasoning → WebMCP tools → Website interaction → Human confirmation → Cart

We built the application using modern web technologies including Next.js, React, TypeScript, and WebMCP.

Challenges we ran into

The biggest challenge was not simply connecting an AI agent to a website.

We wanted the agent to interact with the actual application in a reliable and structured way.

We had to think carefully about:

  • Designing useful WebMCP tools instead of exposing generic actions
  • Keeping the agent and human UI connected to the same business logic
  • Making product search and recommendations work with natural-language requests
  • Handling size and inventory checks
  • Keeping important actions under human control
  • Making the website visually respond to agent actions

We also had to think about the difference between what an agent can do and what an agent should be allowed to do.

For example, searching and comparing products are safe actions, while adding something to a cart or placing an order requires more user involvement.

Accomplishments that we're proud of

The biggest accomplishment is that StyleMate is not just an AI chatbot placed on top of an ecommerce website.

The website itself is agent-operable.

An agent can discover StyleMate's capabilities through WebMCP and use those capabilities to perform real shopping tasks.

We can start with a simple sentence like:

"Find me a formal office outfit under ₹10,000."

And turn that into a complete interaction:

Understand my style → Search products → Compare options → Check availability → Show me the choices → Get confirmation → Add to cart

We are also proud of keeping the architecture simple.

One brain, two front doors.

The human experience and the agent experience are powered by the same underlying application logic.

What we learned

We started this project thinking about AI recommendations.

We ended up thinking much more about agent-friendly websites.

Traditional ecommerce is built around the question:

"What product are you searching for?"

But people usually think in terms of intent:

"I have an office event tomorrow. What should I wear?"

That's where we see the potential of WebMCP.

Instead of an AI simply telling you what to click, the website can expose structured capabilities that an agent can actually use.

We also learned that giving an agent more control doesn't mean removing the human.

The best experience is:

AI does the searching and decision support. Human makes the important decisions.

What's next for StyleMate

Today, StyleMate focuses on fashion discovery and shopping.

But the idea can go much further.

We want StyleMate to understand how a person's style changes over time and become a long-term personal stylist rather than a one-time shopping assistant.

Future possibilities include:

  • Smarter personal style profiles
  • Outfit planning for specific events
  • Wardrobe-aware recommendations
  • More brands and product categories
  • Better fit and size intelligence
  • Wishlist and purchase-history intelligence
  • Personalized seasonal collections
  • Agent-driven shopping across multiple stores

The bigger vision is simple:

Don't search. Be understood.

Built With

Share this project:

Updates

Submission history