Angular v22 introduces an experimental `provideWebMcpTools()` API that lets developers expose Angular signal-backed state as explicit WebMCP tools accessible to AI models like Gemini. Instead of AI scraping the DOM, tools registered via the Angular provider system can inject services, read computed signals, and return structured data. Three example tools are demonstrated: summarizing the current user, analyzing retention risk using a computed `isHighRiskAccount` signal, and drafting a context-aware customer success note. The WebMCP Inspector Chrome extension lets developers verify registered tools. This approach enables safe, reactive, and explicit AI-app integration grounded in real business logic rather than surface-level DOM inspection.
Table of contents
The Solution: Angular Signal StateCreating WebMCP Tools with provideWebMcpTools()Tool 1: Summarize the Current CustomerTool 2: Analyze Retention RiskTool 3: Draft a Customer Success NoteGet Brian Treese ’s stories in your inbox383 Impressions