Build a PC with WebMCP

Why WebMCP is applicable?

I realized that WebMCP is applicable when you want to work alongside an agent and have live updates and data visualizations – *A backend API or MCP would not be appropriate here, because I do not merely want to see parts listed in a chat interface, the end user should be able to also work on it graphically through an interface.

*The above em dash was written by a human

Inspiration

PC building involves a lot of searching, comparing, and compatibility checking. I wanted the agent to do this directly inside the website.

What it does

RigSpec is a PC builder that both the user and a WebMCP agent can control.

The agent can search parts, compare them, edit the build, and check compatibility.

How we built it

React, JavaScript, Vite, WebMCP, and a local PC parts dataset.

The WebMCP tools use the same state and data as the UI.

Challenges

Product names are often ambiguous, and some catalog data is incomplete.

I also had to make sure agent changes and manual user changes stayed synchronized.

Accomplishments

The agent and user actually work on the same interface instead of having a chatbot on the side.

It also still works normally without WebMCP.

What we learned

WebMCP works well when an agent needs to interact with an existing website.

Small tools also worked better than one big "build a PC" tool.

What's next

Better pricing data, more compatibility checks, saved builds, and testing with more WebMCP agents.

Built With

• docker
• javascript
• nginx
• node.js
• react
• vite
• webmcp