WebMCP Project to component builder

Inspiration

While thinking about projects for this hackathon, several ideas came up, like a WebMCP Return Agent or a WebMCP Insurance Claim for Agents. Both ideas allowed an agent could interact with the specific process without the user having to deal with the complexity of technical terms or the time invested in processing the request. Both applications were built as examples, with which ultimately became the project I presented. What I built was a skill that lets users create components with WebMCP built in, easy to import into your current project.

What it does

What the skill does is address the whole process: first understanding the general process, identifying the entities that depend on the component to be built and the tech stack, and then building from there. It's not about simply converting a site to WebMCP; it's about working through everything around it and implementing it in the best way.

How we built it

We followed the skill's own three-phase approach: Discovery to capture the process as a reviewable spec, Synthesis to generate the component, and Verification to test both paths.

Tech stack: React 19 + Vite, Zod as the single schema source for both form validation and the WebMCP tool, Tailwind for styling, deployed on Netlify, with in-memory state to keep the demo lightweight.

Each component also gets a useWebMCPTool hook handling registration lifecycle, AbortController for mount/unmount, ref-based state sync, and stale-call guarding.

Challenges we ran into

Creating a skill that doesn't focus on addressing every possible problem, scenario, or application, but instead uses the available information to capture the process and the logic behind it, analyze the stakeholders involved and their dependencies, and with that knowledge, turn all of it into a WebMCP-ready component.

Accomplishments that we're proud of

The biggest accomplishment is simple: the skill works. We used it to generate both reference examples. The Return Agent and Insurance Claim flows end to end, from the initial discovery spec to a functioning WebMCP-compliant component.

We're also proud of holding onto Discovery as a real, reviewable checkpoint rather than shortcutting it under time pressure a process spec capturing purpose, inputs, and side effects before any code gets written.

Equally, we're proud of the synthesis logic: one schema, one handler, one lifecycle-safe registration hook, ensuring the human and agent paths could never quietly diverge.

What we learned

We learned about WebMCP itself, since we had heard of it before but had never worked with or developed using this technology.

What's next for Embers WebMCP

Improve the current foundation by looking at what was left out and what's worth including. Use the skill to build components in different areas and see what bugs or improvements can be made. And finally, look at community feedback, which will give us direction for where to take development next.

Built With

• react
• vite
• webmcp
• zod