Agentic UI Requires Standards: How AG-UI, A2UI, and MCP Apps Play Together

Transcript

1. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Agentic UI Requires Standards How AG-UI, A2UI, and MCP Apps Play Together ANGULARarchitects.io
2. Mastertextformat High Level View onbearbeiten Agentic AI • Textmasterformat bearbeiten • Zweite Ebene User Intent Iterative Autonomous Behavior Goal Tool Access 2
3. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 4
4. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 5
5. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 6
6. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 7
7. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 8
8. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 9
9. LLM Mastertextformat bearbeiten Backend • Textmasterformat bearbeiten Agent Tools • Zweite Ebene HTTP (SSE, Web Sockets, etc.) UI Runtime Component Tools Frontend 10
10. LLM Mastertextformat bearbeiten Backend • Textmasterformat bearbeiten Harness Tools • Zweite Ebene Agentic System HTTP (SSE, Web Sockets, etc.) UI Runtime Component Tools Frontend 11
11. LLM Mastertextformat bearbeiten Backend • Textmasterformat bearbeiten Agent Tools • Zweite Ebene HTTP (SSE, Web Sockets, etc.) UI Runtime Component Tools Frontend 12
12. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to communicate with the Agent? How to prevent coupling to the server stack and LLM? 13
13. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to support • Zweite Ebene dynamic UI as an answer from the Agent? 14
14. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to visualize • Zweite Ebene tools provided by other systems? 15
15. Mastertextformat bearbeiten Agenda 1) AG-UI: Agent Communication • Textmasterformat bearbeiten 2) A2UI: Dynamic/ Generative UI • Zweite Ebene 3) MCP Apps: Visual Tools 16
16. Mastertextformat About Me bearbeiten Manfred Steyer, ANGULARarchitects.io • Textmasterformat bearbeiten • Zweite Ebene (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular 17
17. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to communicate with the Agent? How to prevent coupling to the server stack and LLM? 18
18. Mastertextformat We Need a Protocol! bearbeiten • Textmasterformat bearbeiten Abstracting • Zweite Ebene Server Stack Abstracting LLM Streaming Events TransportAgnostic SSE, WebSockets, … 19
19. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene AG-UI for Agent Communication 20
20. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 21
21. Mastertextformat Supported Integrations bearbeiten • LangGraph • Spring AI • Textmasterformat bearbeiten • CrewAI • Pydantic AI • Zweite Ebene • Microsoft Agent Framework • Agno • Google ADK • LlamaIndex • AWS Strands Agents • AG2 • AWS Bedrock AgentCore • AWS Bedrock Agents • Mastra • OpenAI Agent SDK • Cloudflare Agents 22
22. Mastertextformat bearbeiten SDKs •• TypeScript • Java Textmasterformat bearbeiten • Python • Rust • Zweite Ebene • Kotlin • .NET • Golang • Nim • Dart • Flowise • Langflow 23
23. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 24
24. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 25
25. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to support • Zweite Ebene dynamic UI as an answer from the Agent? 26
26. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 27
27. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene A2UI: Dynamic UI 28
28. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 29
29. Mastertextformat bearbeiten Idea LLM • Textmasterformat bearbeiten Request(s) • Zweite Ebene UI Surface (A2UI or minimal DSL) Agent UI Surface (A2UI) Request Agent Client 30
30. Mastertextformat bearbeiten Example { "id": "root", "children": ["headline", "name", "..."] } • Textmasterformat bearbeiten { • Zweite Ebene "id": "headline", "component": "Text", "variant": "h2" "text": "Passenger", } { "id": "name", "component": "Text", "variant": "body" "text": { "path": "/passenger/name" } } 31
31. Mastertextformat bearbeiten Renderer • React • Textmasterformat bearbeiten • Lit (Web Components) • Zweite Ebene • Angular • Flutter • Dart • Android • SwiftUI, iOS 32
32. Mastertextformat bearbeiten Characteristics • Textmasterformat bearbeiten • ZweiteNoEbene foreign code A2UI: Structure Client: Rendering Client: Event Handler 33
33. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO Branch: a2ui-dynamic 34
34. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to useEbene tools provided by • Zweite other systems? 35
35. Mastertextformat Model Context Protocol bearbeiten (MCP) • Textmasterformat bearbeiten • Zweite Ebene LLM Other System Agent Tools 36
36. Mastertextformat bearbeiten SDKs • Rust • TypeScript • Textmasterformat• Swift bearbeiten • Python • Zweite Ebene • Ruby • C# • PHP • Go • Kotlin • Java 37
37. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 38
38. Mastertextformat MCP Apps bearbeiten • Textmasterformat bearbeiten Visualize Tool Provides • Zweite EbeneResults Client Code Host Context: Theme, Size, … Sandbox Messaging w/ Widget 39
39. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 40
40. Mastertextformat bearbeiten Conclusion • Textmasterformat bearbeiten Agentic AI/UI • Zweite Ebene • Intent • Autonomy • Tools Standards • AG-UI • A2UI •… Tactics • Zod & JSON Schema • Processing Messages (Text, Widgets, Tools) 41