Bazaar — Agent-Native Store

Bazaar turns e-commerce into an agent-native experience where AI agents can discover products, manage carts, and complete purchases using real WebMCP tools.

Comment

Inspiration

Traditional e-commerce websites are built mainly for humans. AI assistants can recommend products, but they usually cannot directly interact with a website to perform real shopping actions.

We wanted to explore a simple question: What if an AI agent could actually shop on the same website as a human?

That idea inspired Bazaar — Agent-Native Store. We built Bazaar to demonstrate how WebMCP can turn a traditional e-commerce website into an agent-native experience where AI agents can discover products, make decisions, manage carts, and complete purchases.

Our goal was not to build another AI chatbot, but to make the website itself usable by AI agents.

What it does

Bazaar is an agent-native e-commerce store powered by WebMCP.

It exposes 12 functional WebMCP tools that allow AI agents to:

• Search and filter products • View product details • Compare products • Get recommendations • Add products to the cart • Update cart quantities • Remove products • View the cart • Clear the cart • Checkout • View order history • Browse product categories

For example, an agent can receive a request like:

"Find me running shoes under ₹2000 and add the cheapest one to my cart."

The agent can search the catalog, find the best matching product, and add it directly to the user's cart.

The most important part is that humans and AI agents share the same application state. When an agent adds a product, it immediately appears in the user's normal cart and is marked as "Added by agent."

Bazaar also includes a live Agent Activity feed so users can see what the agent is doing.

How we built it

We built Bazaar using Next.js 16, React, TypeScript, Tailwind CSS, shadcn/ui, Zustand, Prisma ORM, SQLite, and WebMCP.

The WebMCP integration uses:

document.modelContext.registerTool()

We created 12 tools with clear descriptions, input schemas, and execution functions.

A key architectural decision was to make WebMCP use the same application logic as the human interface.

The WebMCP tools call the same Zustand store actions used by the React UI.

This creates a shared architecture:

Human UI → Zustand Store ← WebMCP Tools ← AI Agent

Because both interfaces use the same store and business logic, humans and AI agents share the same product catalog, cart, application state, and order flow.

The application is deployed on Vercel and includes an Agent Activity system for transparent tool execution.

Challenges we ran into

One of our biggest challenges was understanding how WebMCP tools are exposed and executed in the browser.

Initially, we expected tools such as search_products() to behave like normal JavaScript functions. We learned that WebMCP tools are exposed through the browser's model context instead.

We also had to carefully design tool descriptions and input schemas so AI agents could understand what each tool does, which parameters it accepts, and what information it returns.

Another challenge was synchronizing agent actions with the human UI.

We did not want the AI agent to have a separate cart or application state. Instead, every agent action had to use the same business logic as the human interface.

Testing complete workflows such as product search → selection → add to cart → cart management → checkout also required careful integration between WebMCP and our application state.

Accomplishments that we're proud of

We are proud that Bazaar goes beyond simply registering WebMCP tools. We built a complete agent-native shopping workflow.

Our key accomplishments include:

• 12 functional WebMCP tools • Shared human + AI shopping cart • Agent actions visibly marked in the UI • Live Agent Activity feed • Natural-language product discovery • Price filtering and product sorting • Product comparison and recommendations • Cart management and checkout • Order history • WebMCP connected directly to the same business logic used by the UI • A fully deployed live web application

The biggest accomplishment is demonstrating that WebMCP can transform a traditional e-commerce website into an application that AI agents can actively operate, not just read.

What we learned

Building Bazaar taught us that creating an agent-native application is more than adding an AI chatbot.

The tools themselves become an important part of the application's interface.

We learned that WebMCP tools need clear descriptions, well-defined schemas, predictable outputs, and reliable execution.

We also learned the importance of shared application state. By connecting WebMCP directly to our existing business logic, agent actions behave consistently with actions performed through the human UI.

Most importantly, we learned that websites can be designed for two types of users: humans through visual interfaces and AI agents through structured tools.

WebMCP provides an exciting way to bridge these two experiences.

What's next for Bazaar — Agent-Native Store

Bazaar currently focuses on the core agent-native shopping experience. Our next goal is to make the platform more intelligent, autonomous, and user-controlled.

Future plans include:

• More intelligent personalized recommendations • Conversational shopping experiences • Multi-step autonomous shopping workflows • Better agent activity and audit history • Permission controls for sensitive actions • More payment and checkout options • Improved mobile experience • Integration with external commerce services • Multi-agent shopping workflows

Our long-term vision is to build an e-commerce platform where AI agents can safely discover, compare, purchase, and manage products on behalf of users while keeping the user in control.

Built With

Share this project:

Updates

Submission history