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.

Without a structured way to expose these…