Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience
summary
Walks through wiring WebMCP into Angular (navigator.modelContext) to register callable tools so agents don’t screenshot the DOM, shows using signal forms only for form tools, and demonstrates A2UI delivering reactive component trees that render natively with app styling and accessibility. Demo app is a stuffed-animal rescue site with a Chrome flag enabled; an agent calls tools to report 10 available animals and returns interactive cards and buttons via A2UI. Everything is experimental but the example works end-to-end.
AI-written summary · about
chapters (11)
- 0:00AI in Angular intro
- 1:13Agentic AI capabilities
- 3:21Adding AI does not create value magically
- 6:11Demo setup and user intent
- 8:58Agent experience and WebMCP
- 12:13WebMCP tools in Angular
- 13:41Live WebMCP tools demo
- 18:31AGUI and A2UI protocols
- 21:02Generative UI with ATUI
- 22:51Live ATUI chat demo
- 25:04Conclusion and Q&A
related talks
32mLeveraging Angular-Based Frameworks for AI-Driven Testing
22mThe agent-ready web: Simplify user actions with WebMCP
23mIntroducing WebMCP: Agents in the Browser
30mPractical steps to make your website agent-ready
54mTour of Agent Protocols: MCP, A2A, AG-UI, A2UI
30mMCP DevTools: Giving Your AI Eyes
27mSmarter UIs: Building Context-Aware AI Apps with Genkit & Angular
01h 28mAI Coding Agents and how to code them