Sizel

A WebMCP electronics shop where browser agents build compatible PCs and recommends tech.

Comment

Inspiration

What inspired Sizel was mostly my own experience while building my current PC. I barely knew what to look for or which specifications actually mattered. I had 30 tabs open just to research and compare the parts, yet i still felt lost when i found out that my graphic card doesn't fit in my desired case.

It's not like the informations were hidden, but they were buried inside a long spec list, and for someone not very technical at that time it was a really hard task. Because the real challenge is understanding how each component affects the other.

The experience made me wonder how many people encounter same problem, how many people buy wrong component because they lack the knowledge?

I made Sizel expose WebMCP tools so that agents can connect details and explain compatibility.

What it does?

Sizel is a fictional Electronics e-shop. Internally, you may encounter another name - Rigsmith - that's no longer used internal project name.

Shoppers can browse and filter products, inspect individual product pages, select multiple variations of the product, or assemble a PC from a floating build summary. Each build slot opens its own category catalog.

The repo implements and registers 15 WebMCP tool descriptors. The tools do not automatically choose a winner or place a real order. For example the create_watchdog asks user before calling it.

All products, brands, logos, reviews, prices, stock values and performance data are made up just for this demo.

The important part for me is that the agent actually operates in the same tab in which you are. The shopper can watch what is happening, inspect the same products, and keep control over decisions like adding something to the cart or creating a watchdog. The agent helps with the difficult reasoning, but it does not silently take over.

How I built it?

I built Sizel using agentic development. The languages used are: Typescript, Vite and CSS. The project contains a self contained local catalog of 135 products, with color and storage variations.

The JSON catalog is source for the front end, but there is a SQLite copy included for inspection. The application therefore does not depend on external api for its products.

The UI and WebMCP tools share one central App.tsx. picks stores parts, while chosen tracks explicit selections. Centralized mutations and validation keep compatibility, totals, build summary, cart, and checkout aligned. Checkout field and progressions remains shopper-controlled.

The tools are intentionally scoped as specific shopping capabilities. Searching and comparing listings, finding compatible components, and validating it.

Challenges I ran into

One of the biggest challenges was making the flow snappy. In the A/B runs from the video, the WebMCP flow took 2 minutes 35 seconds. Though this timing isn't an average across more runs, it usually stays around that 2:30 -3 minute mark. Initially, the process was a lot slower, the breakthrough came when i simplified the tools themselves, and let the agent use its own reasoning.

Another challenge was deciding what the agent should not claim. The product reviews, stock and performance values are synthetic, so I had to make the tools say that clearly. League of Legends, for example, has no simulated benchmark in the catalog, and the tool reports that instead of inventing a number.

Accomplishments that I'm proud of

To be honest, I'm mostly proud of how the UI turned out. I wanted the store to feel like a real e-shop, so i took care with it.

I am also proud that the agent does not just return a hidden answer. It can show products and categories in the storefront while it works, so the shopper can follow the process instead of only receiving a final block of text.

What I learned

I learned that agentic tools work best when they are as dumb as possible, because the agent's own reasoning is powerful enough, and when there is not that much of them. A large tool repertoire just makes agent slower, and occasionally makes his reasoning more complex because he has to figure out which of there 40 tools to use now, especially when they are all so similar.

Built With

Share this project:

Updates

Submission history