WebMCP Angular KIT tool

Most AI browser agents today are essentially screen-scrapers: they take screenshots, guess button coordinates, or try to parse messy DOM trees. That approach is slow, breaks the moment a CSS class changes, and fails completely when interacting with a canvas element or stateful WebGL scenes. When the W3C published the WebMCP draft, we saw a much cleaner path: expose typed, client-side functions directly from the browser runtime to the model. Instead of treating the web app like a static document an external bot has to inspect from the outside, the user and the agent can mutate the exact same application state in real time, whether that means extruding a 3D CAD mesh at 60 FPS or running financial risk analytics without backend roundtrips.

The showcase is built with Angular 22, Three.js, and Bun, organized into four primary layers:

First, Angular 22 signals and directives. Rather than wrapping tools in heavy abstractions, we built directives like webmcpTool that bind directly to reactive signals. When a user adjusts an input or the agent calls a tool, state updates synchronously with zero change-detection penalty.

Second, the Three.js spatial engine and push-pull extrusion. We built a SceneActionBus to decouple asynchronous tool promises from the Three.js render loop. The agent can draw planar 2D profiles and extrude solid 3D geometry along the face normal vector, while camera movements interpolate across spherical coordinates for smooth transitions. The agent can also call a screenshot tool to pull the raw WebGL drawing buffer and visually verify its own modifications.

Third, in-browser memory with IndexedDB and BM25. Rather than standing up an external vector database, we built an episodic memory store on IndexedDB paired with a pure TypeScript BM25 search implementation. Relevance scoring runs standard Robertson-Spärck Jones IDF directly on the client using tuned parameters (k1 = 1.2 and b = 0.75), allowing the agent to retrieve user preferences and historical actions in sub-millisecond lookups completely offline.

Fourth, a dynamic SubAgents SDK and multi-domain business intelligence. Injecting dozens of tool schemas into every prompt quickly blew through token budgets. We created an SDK that dynamically filters tools per domain, allowing the main agent to delegate tasks to specialized workers (such as analytics or 3D specialists). These workers run isolated multi-turn loops, compute normalized anomaly risk scores across metrics, and return concise execution receipts signed with a client-side SHA-256 hash.

We tackled several technical hurdles along the way. Calling Three.js mutations straight out of asynchronous HTTP promises caused frame drops, so we created a queue in SceneActionBus that holds incoming tool commands and executes them strictly on animation frame ticks. Exposing every tool simultaneously caused models to hallucinate arguments or hit context caps; scoping tools dynamically by route and delegating to subagents cut token usage by roughly 85%. Additionally, server-side rendering under Node and Bun crashed whenever code referenced browser globals like window, navigator, or IndexedDB. We resolved this by building an in-memory emulator (WebMcpEmulator) that activates during SSR and in browsers lacking native WebMCP support, eliminating hydration mismatches.

Through this process, we achieved 511 unit and integration tests passing on Bun in under 1.5 seconds. The project demonstrated that agent autonomy does not require a heavy backend or remote vector database; native browser primitives like IndexedDB, WebGL, and Signals are remarkably capable when wired directly to function calling. Furthermore, Angular's dependency injection model fits WebMCP tool registration naturally by treating tools as standard injectable providers.

Moving forward, our next steps include publishing the webmcp-angular library as an open-source npm package, adding WebXR support to let agents interact with 3D scenes in headsets like Apple Vision Pro and Meta Quest, and compiling OpenCASCADE geometry routines to WebAssembly for true solid modeling directly in the browser.