Beyond Chatbots: Agentic UI with Open Standards @W-JAX 2026, München

Transcript

1. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Beyond Chatbots: Agentic UI with Open Standards ANGULARarchitects.io
2. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Let's imagine a "Killer App" … 2
3. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene VisiCalc, 1979 3
4. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene "Really, we need to chat now?" 4
5. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene To chat or not to chat … … that's the wrong question! 5
6. Mastertextformat High Level View onbearbeiten Agentic AI • Textmasterformat bearbeiten • Zweite Ebene User Intent Iterative Autonomous Behavior Goal Tool Access 6
7. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 7
8. LLM Mastertextformat bearbeiten Backend • Textmasterformat bearbeiten Agent Tools • Zweite Ebene HTTP (SSE, Web Sockets, etc.) UI Runtime Component Tools Frontend 16
9. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to communicate with the Agent? How to prevent coupling to the server stack and LLM? 19
10. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to support • Zweite Ebene dynamic UI as an answer from the Agent? 20
11. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to visualize • Zweite Ebene tools provided by other systems? 21
12. Mastertextformat bearbeiten Agenda 1) AG-UI: Agent Communication • Textmasterformat bearbeiten 2) A2UI: Dynamic/ Generative UI • Zweite Ebene 3) MCP Apps: Visual Tools 22
13. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to communicate with the Agent? How to prevent coupling to the server stack and LLM? 24
14. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene AG-UI for Agent Communication 26
15. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 27
16. 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 28
17. Mastertextformat bearbeiten SDKs •• TypeScript • Java Textmasterformat bearbeiten • Python • Rust • Zweite Ebene • Kotlin • .NET • Golang • Nim • Dart • Flowise • Langflow 29
18. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 30
19. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 31
20. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to support • Zweite Ebene dynamic UI as an answer from the Agent? 32
21. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 33
22. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene A2UI: Dynamic UI 34
23. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 35
24. 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" } } 36
25. Mastertextformat bearbeiten Catalogs • Basic Catalog • Textmasterformat bearbeiten https://a2ui.org/reference/components/ • Zweite Ebene • Custom Catalogs: Components + Functions + Metadata 37
26. Mastertextformat Create Surface Message bearbeiten { "version": "v0.9", "createSurface": { "surfaceId": "demo", "catalogId": "http://...", }, • Textmasterformat bearbeiten • Zweite Ebene } 38
27. Mastertextformat Update Components bearbeiten Message { "version": "v0.9", "updateComponents": { "surfaceId": "demo", "components": [ { "id": "root", "component": "Column", "children": […], }, […] ] } • Textmasterformat bearbeiten • Zweite Ebene } 39
28. Mastertextformat Update Data Modelbearbeiten Message { "version": "v0.9", updateDataModel: { surfaceId: "demo", path: "/passenger", value: { id: 42, name: 'John Doe' }, } • Textmasterformat bearbeiten • Zweite Ebene } 40
29. Mastertextformat Delete Surface Message bearbeiten { "deleteSurface": { "surfaceId": "demo", }, • Textmasterformat bearbeiten } • Zweite Ebene 41
30. Mastertextformat bearbeiten Renderer • React • Textmasterformat bearbeiten • Lit (Web Components) • Zweite Ebene • Angular • Flutter • Dart • Android • SwiftUI, iOS 42
31. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 43
32. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to useEbene tools provided by • Zweite other systems? 44
33. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene MCP Apps 45
34. Mastertextformat MCP Apps bearbeiten • Textmasterformat bearbeiten Visualize Tools Provides incl. Results • Zweite Ebene Client Code Host Context: Theme, Size, … Sandbox Messaging w/ Widget 46
35. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 47
36. Agentic UI with Angular Mastertextformat bearbeiten Architectures with Open Standards • Textmasterformat bearbeiten 220+ pages, PDF, EPUB • Zweite Ebene Regular Free Updates! agentic-angular.com 48
37. Mastertextformat bearbeiten Conclusion • Textmasterformat bearbeiten Agentic AI/UI • Zweite Ebene • Intent • Autonomy • Tools Standards • AG-UI • A2UI • MCP Apps Tactics • JSON Schema • Processing Messages (Text, Widgets, Tools) 49
38. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Let's build the next "Killer App" … 50
39. Mastertextformat bearbeiten Manfred Steyer [LinkedIn, Twitter, Facebook] Manfred Steyer • Textmasterformat bearbeiten [web] ANGULARarchitects.io • Zweite Ebene Slides, Examples, Book Remote Company Workshops and Consulting http://angulararchitects.io @ Manfred Steyer 51