A ngular v22 is experimenting with a new way to expose your app’s real capabilities to AI. Instead of letting models guess what's happening by scraping the DOM, we can now provide explicit, state-backed tools directly to the browser. This post walks through setting up WebMCP tools to bridge the gap between your Angular state and AI models like Gemini . The Problem: AI Is Blind to App State Most AI interactions with web apps today are limited to what the model can “see” in the rendered page. This is brittle, surface-level, and completely misses the rich business logic living inside our services and signals. Here's an example of a basic Angular app with no WebMCP tools registered: We're using the WebMCP Inspector to see what tools are available and in this case, there are none: In this app, we have data that doesn’t always live in the DOM, like retention risk calculations and hidden account metrics, that could help an AI provide much better assistance.…