Agentronics — Project Story

Inspiration

Somewhere in the last year, the web quietly got a second audience. Every mid-market e-commerce and SaaS site is now being visited not just by people, but by AI agents — ChatGPT with browsing, Gemini, Claude, Operator-style computer-use agents, and increasingly, structured tool-callers built on protocols like WebMCP. They search, they compare, they click "Add to Cart," they check out. Sometimes on behalf of a real human sitting one layer removed; sometimes fully autonomously.

Nobody asked these sites whether that was okay, and almost nobody's analytics stack can tell an agent-driven session apart from a human one. Conversion funnels are quietly getting corrupted. Attribution is breaking. And there is no identity layer, no permission model, and no audit trail for any of it — the equivalent of letting an entirely new class of user into your storefront with no ID check and no receipt.

That gap — agents are already transacting on the web, and nobody is governing it — is what started Agentronics. WebMCP's arrival (navigator.modelContext, a native browser API letting a page register real tools an agent can call instead of scraping the DOM) was the moment the thesis stopped being speculative. It's not "agents might browse your site someday." It's "here's a W3C draft spec letting them do it natively, today, in Chrome." Someone has to sit in the middle and measure, govern, and eventually settle that traffic — the DoubleVerify/IAS role, but for the agentic web instead of the ad-tech web.

What We Built

To make the problem tangible instead of theoretical, we built a small but complete demonstration: a 4-page Amazon-style shopping flow (Home → Search → Cart → Checkout) where every user action is also exposed as a native WebMCP tool. searchProducts, addToCart, updateCartItemQuantity, proceedToCheckout, placeOrder — a dozen tools in total, registered directly against navigator.modelContext.registerTool(), no DOM-scraping polyfills, no screenshot loops.

Point an agent (we tested against Gemini CLI, connected through the Model Context Tool Inspector Chrome extension) at the site and give it a single instruction — "search for headphones, add the wireless noise-cancelling ones with quantity 2, go to cart, checkout, place the order" — and it completes the entire flow through structured tool calls instead of guessing at pixel coordinates. That's the world Agentronics is built to sit inside of: a web where agents transact through declared, inspectable tools, and where every one of those calls is an event someone can measure, authorize, and eventually reconcile.

How We Built It

The demo storefront: React 19 + Vite, Tailwind for styling, React Router for the four-page SPA flow, Zustand for cart state shared across pages. No backend — a hardcoded 12-SKU catalog across four categories, so the whole flow runs entirely client-side.
The WebMCP layer: a small useWebMCPTool hook wraps navigator.modelContext.registerTool() with mandatory feature detection ("modelContext" in navigator) and AbortSignal-based cleanup, so tools register on mount and cleanly unregister on unmount as the SPA routes between pages. Read-only tools (searchProducts, viewCart, getProductDetails) are marked readOnlyHint: true so an agent can call them freely; mutating tools (addToCart, placeOrder) route through client.requestUserInteraction() for confirmation before anything irreversible happens.
A visible trust surface: a small floating badge shows "WebMCP Active — N tools registered," with every registration and execution logged to console — because a governance thesis is only credible if you can actually see what an agent is doing on your page, not just trust that it's well-behaved.
The platform underneath: the @agentronics/sdk (published on npm) is what would sit behind a real deployment of this — agent detection across three ingestion paths (WebMCP-native, Web Bot Auth–signed agents like Operator and AWS AgentCore, and stealth Chromium-based agents caught via behavioral fingerprinting), feeding a GCP-hosted intelligence platform (Cloud Run, a GCS Parquet lake, Neon Postgres with pgvector, Vertex AI Gemini for natural-language insight generation).
Design system: a small, deliberate palette — near-black, periwinkle indigo, warm amber — built as reusable CSS/Tailwind v4 tokens with a proper light/dark flip (not a simple inversion; the accent colors are re-tuned so they glow instead of vibrate on a dark canvas).

Challenges We Ran Into

WebMCP is brand new and under-documented. It's a February 2026 W3C draft with almost no production examples to learn from beyond the spec text and a handful of Google demo repos. We had to work directly from the IDL rather than from tutorials, which meant a lot of double-checking against the spec to avoid hallucinating APIs that don't exist yet (ModelContextClient.requestUserInteraction, the exact shape of a tool's content response array, the fact that tools are scoped to page lifetime and vanish on navigation).
SPA navigation vs. tool lifecycle. Because this is a client-side-routed React app, "navigating" between pages never actually reloads the document — so we had to be deliberate about which tools live at the Layout level (global, persistent: getCartCount, navigateToPage) versus which are page-scoped and need to cleanly register/unregister via AbortSignal as components mount and unmount. Getting that boundary wrong either leaks stale tools or drops live ones mid-session.
Confirmation without friction. Mutating actions like addToCart and placeOrder need a human-in-the-loop checkpoint, but over-gating every tool call makes the agent flow no faster than a person clicking through manually. Deciding which tools get readOnlyHint: true and which route through requestUserInteraction() was less a technical problem than a governance-design one — which is, not coincidentally, the exact judgment call Agentronics exists to help other sites make at scale.
Making an invisible problem visible. The hardest part wasn't the code — it was building something that makes a genuinely abstract thesis ("your analytics are already being corrupted by agent traffic you can't see") into something a judge, or a Head of Growth at a DTC brand, can watch happen in front of them in thirty seconds.

What We Learned

Building the demo end-to-end sharpened the thesis rather than just illustrating it. Watching an agent complete a full purchase flow through declared tools — cleanly, quickly, with zero DOM guesswork — made the underlying problem concrete: this is not a hypothetical future traffic class. It is a fast, cheap, and increasingly common way for both real customers and their agents to transact, and right now it looks identical to a human session in every standard analytics tool. The measurement gap isn't coming — it's already open. That's the wedge Agentronics leads with, and building this demo is the clearest proof of it we've been able to put in front of anyone.