Quibix

Inspiration

What it does

Demo

▶️ https://youtu.be/FICO-ePrFKs

Inspiration

I tested how well an AI agent can use my own sites without WebMCP: I asked an agent with no interactive browser to find a specific button on one of my pages. It couldn't — it only saw plain text extracted from the HTML, no colors, no way to click. That simple experiment showed the real problem WebMCP solves: agents today guess at the interface instead of knowing exactly what they can do.

What it does

Quibix is a TypeScript library with three decorators — @Expose, @Explain, @Param — that wrap the native WebMCP API (document.modelContext.registerTool()). Instead of hand-writing the verbose registration call for every function, developers annotate a class and its methods, and Quibix automatically generates the full contract (name, description, parameter JSON Schema) an agent needs to safely invoke that function.

As a real use case, we implemented it on top of SLAS (slas.luistriana.dev), a real social security contribution calculator for independent workers in Colombia, with real legal logic (IBC, minimum-wage brackets, Solidarity Pension Fund). With Quibix, an agent can call the real, audited calculation — instead of risking a made-up figure or an outdated legal decree.

What makes it different

No existing library in the ecosystem (@mcp-b/react-webmcp, Google Chrome Labs' use-webmcp-tool) is framework-agnostic — they're all tied to React. Quibix uses plain TypeScript decorators, so it works the same in Next.js, Angular, or vanilla JS.

We also added a fallbackUrl field that doesn't exist in the base spec: when an agent can't execute code (true for most agents outside WebMCP-native browsers today), the fallback URL is embedded directly into the tool's description — so the agent still knows where to send the user.

How we built it

TypeScript with decorators (experimentalDecorators), on top of the native document.modelContext API. To test it end-to-end before native support lands in stable Chrome, we used the @mcp-b/global polyfill and verified it with real headless Playwright, running three real calculation cases against the full legal logic (including the conditional activation of the Solidarity Pension Fund once the 4-minimum-wage threshold is crossed).

Challenges we ran into

• WebMCP is very early-stage (origin trial) — there's no way to test it today with a real agent integrated into a consumer browser, so we verified the contract manually via console instead.
• The polyfill's actual API differs from what its own README documents (executeTool instead of callTool, arguments as a JSON string instead of a plain object) — we found this through trial and error and documented it so no one else loses time on it.
• Custom fields like fallbackUrl don't survive the official contract's serialization — solved by embedding it into description instead.

Accomplishments that we're proud of

A wrapper that generates a 100% valid WebMCP contract, verified with real (not simulated) execution against real legal business logic, with honest documentation of the ecosystem's current limitations.

What we learned

That "framework-agnostic" is a real, underserved gap in the current WebMCP tooling landscape, and that early-stage web standards require building your own verification path (console + Playwright) rather than assuming an agent surface will just work.

What's next for Quibix

Publish to npm, add a fourth decorator for permissions/security (an open topic in the spec), and add support for the declarative API (HTML attributes) alongside the current imperative one.

How we built it

Built With

• typescript
• vite
• webmcp