Agentic UI Requires Standards: AG-UI, A2UI, and MCP Apps Work Together @Angular London

Transcript

1. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Agentic UI Requires Standards: How AG-UI, A2UI, and MCP Apps Work Together ANGULARarchitects.io
2. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Let‘s imagine a „Killer App“ … 2
3. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 VisiCalc, 1979
4. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 "Really, we need to chat now?"
5. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 To chat or not to chat … … this is not the question!
6. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 User Intent Autonomous Behavior Goal High Level View on Agentic AI Iterative Tool Access
7. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8
8. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9
9. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10
10. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11
11. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12
12. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Agent LLM Tools Component UI Runtime Tools HTTP (SSE, Web Sockets, etc.) Backend Frontend
13. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Harness LLM Tools Component UI Runtime Tools HTTP (SSE, Web Sockets, etc.) Backend Frontend Agentic System
14. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Agent LLM Tools Component UI Runtime Tools HTTP (SSE, Web Sockets, etc.) Backend Frontend
15. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Abstracting Server Stack Abstracting LLM Streaming Events Transport- Agnostic We Need a Protocol! SSE, WebSockets, …
16. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17
17. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • LangGraph • CrewAI • Microsoft Agent Framework • Google ADK • AWS Strands Agents • AWS Bedrock AgentCore • Mastra • Pydantic AI • Agno • LlamaIndex • AG2 • AWS Bedrock Agents • OpenAI Agent SDK • Cloudflare Agents 18 Supported Integrations
18. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten •TypeScript •Python •Kotlin •Golang •Dart •Langflow •Java/ Spring AI •Rust •.NET •Nim •Flowise 19 SDKs
19. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 DEMO Branch: agentic
20. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 How to support dynamic UI as an answer from the Agent?
21. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22
22. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Idea Agent LLM Agent Client Request Request(s) UI Surface (A2UI or minimal DSL) UI Surface (A2UI)
23. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Example { "id": "root", "children": ["headline", "name", "..."] } { "id": "name", "component": "Text", "variant": "body" "text": { "path": "/passenger/name" } } { "id": "headline", "component": "Text", "variant": "h2" "text": "Passenger", }
24. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • React • Lit (Web Components) • Angular • Flutter • Adroid (Q2/2026) 25 Renderer
25. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Characteristics No foreign code A2UI: Structure Client: Rendering Client: Event Handler
26. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 DEMO Branch: a2ui-dynamic
27. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 How to use tools provided by other systems?
28. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 Model Context Protocol (MCP) Agent LLM Tools Other System stdin/stdout, HTTP, SSE, …
29. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • TypeScript • Python • C# • Go • Java • Rust • Swift • Ruby • PHP • Kotlin 30 SDKs
30. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31
31. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 MCP Apps Visualize Tool Results Provides Client Code Sandbox Host Context: Theme, Size, … Messaging w/ Widget
32. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33
33. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 34 DEMO Branch: mcp-apps
34. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 35 Autonomous Systems can lead to Mistrust and Fear
35. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36
36. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 37 Human in the Loop Selected Patterns
37. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 38 Transparency
38. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 39 Kill Switch
39. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 40 Approval
40. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 41 Action Cards
41. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 42 Questions and Options
42. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 43 Co-Planning
43. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 44 DEMO Branch: hitl-options
44. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 45 Architectures with Open Standards Agentic UI with Angular PDF, EPUB Regular Free Updates! Q3/2026 Waiting List: (Early Bird Discount) agentic-angular.com
45. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 46 http://angulararchitects.io/agentic July 2026
46. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 47 Conclusion Agentic AI/UI • Intent • Autonomy • Tools Standards • AG-UI • A2UI • MCP Apps HITL • Transparency • Approval++ • Co-Planning
47. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 48 Let's build the next "Killer App" …
48. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 49 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io