A2UI as an Architecture Question: Agentic UI Between AI Freedom and Control

1. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene A2UI as an Architecture Question: Agentic UI Between AI Freedom and Control 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. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 14
9. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Some Challenges for our Dashboard … 15
10. Mastertextformat Dashboard from Hell bearbeiten … • Textmasterformat bearbeiten • Zweite Ebene 16
11. Mastertextformat bearbeiten Trade-off • Textmasterformat bearbeiten Autonomy • Zweite Ebene Control 17
12. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene It Takes Some Time … 18
13. Mastertextformat bearbeiten Timing • Textmasterformat bearbeiten Just A2UI • Zweite Ebene • 40 sec • 46,000 Tokens Optimized • 0.1 sec • 1,500 19
14. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to support • Zweite Ebene dynamic UI as an answer from the agent? 24
15. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to control results? 25
16. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to optimize performance? 26
17. Mastertextformat bearbeiten Agenda 1) A2UI: Dynamic/ Generative UI • Textmasterformat bearbeiten 2) DSLs & A2UI • Zweite Ebene 3) Caching A2UI 27
18. Mastertextformat About Me bearbeiten Manfred Steyer, ANGULARarchitects.io • Textmasterformat bearbeiten • Zweite Ebene (Remote) Angular Workshops and Consulting Google Developer Expert for Angular & AI Blog, Books, Articles, and Talks about Angular 28
19. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to support • Zweite Ebene dynamic UI as an answer from the agent? 29
20. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 30
21. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene A2UI: Dynamic UI 31
22. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 32
23. Mastertextformat bearbeiten Idea LLM • Textmasterformat bearbeiten Request(s) • Zweite Ebene UI Surface (A2UI) Agent UI Surface (A2UI) Request Agent Client 33
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" } } 34
25. Mastertextformat bearbeiten Catalogs • Basic Catalog • Textmasterformat bearbeiten https://a2ui.org/reference/components/ • Zweite Ebene • Custom Catalogs: Components + Functions + Metadata 35
26. Mastertextformat Create Surface Message bearbeiten { "version": "v0.9", "createSurface": { "surfaceId": "demo", "catalogId": "http://...", }, • Textmasterformat bearbeiten • Zweite Ebene } 36
27. Mastertextformat Update Components bearbeiten Message { "version": "v0.9", "updateComponents": { "surfaceId": "demo", "components": [ { "id": "root", "component": "Column", "children": […], }, […] ] } • Textmasterformat bearbeiten • Zweite Ebene } 37
28. Mastertextformat Update Data Modelbearbeiten Message { "version": "v0.9", updateDataModel: { surfaceId: "demo", path: "/passenger", value: passenger, } • Textmasterformat bearbeiten • Zweite Ebene } 38
29. Mastertextformat Delete Surface Message bearbeiten { "deleteSurface": { "surfaceId": "demo", }, • Textmasterformat bearbeiten } • Zweite Ebene 39
30. Mastertextformat bearbeiten Renderer • React • Textmasterformat bearbeiten • Lit (Web Components) • Zweite Ebene • Angular • Flutter • Dart • Android • SwiftUI, iOS 40
31. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Consuming A2UI 41
32. LLM Mastertextformat bearbeiten Backend • Textmasterformat bearbeiten Tools Agent • Zweite Ebene HTTP (SSE) Client Runtime Component Tools Frontend 42
33. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 43
34. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to control results? 44
35. Mastertextformat Dashboard from Hell bearbeiten … • Textmasterformat bearbeiten • Zweite Ebene 45
36. Mastertextformat Examples for Guardrails bearbeiten Prompts (weak!) Architecture • Textmasterformat bearbeiten Plan • Zweite Ebene Execute Eval Guard Rails Check Inputs Co-Planning HITL Throttling Params & Auth Checks Check Output Sandboxes 46
37. Mastertextformat You Need to Combine bearbeiten Guardrails! • Textmasterformat bearbeiten • Zweite Ebene 47
38. Mastertextformat bearbeiten Alternative LLM • Textmasterformat bearbeiten Request(s) • Zweite Ebene UI Surface (app specific DSL) Agent UI Surface (A2UI) Request Agent Client 48
39. Mastertextformat Types for Possible DSL bearbeiten { type: "flightsTable", from: string, to: string, maxRows?: number } •{ type: Textmasterformat "delayedFlightsTable",bearbeiten from: string, to: string, maxRows?: number } • Zweite Ebene { type: "delayShareChart", from: string, to: string, chartType?: "pie" | "bar" } 49
40. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to take care of • Zweite Ebene performance? 50
41. Mastertextformat Cache Everything but bearbeiten Data Model { "version": "v0.9", updateDataModel: { surfaceId: "demo", path: "/passenger", value: passenger, } • Textmasterformat bearbeiten • Zweite Ebene } 51
42. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 52
43. Agentic UI with Angular Mastertextformat bearbeiten Architectures with Open Standards • Textmasterformat bearbeiten 220+ pages, PDF, EPUB • Zweite Ebene Regular Free Updates! agentic-angular.com 53
44. Mastertextformat bearbeiten Conclusion • Textmasterformat bearbeiten A2UI • Zweite Ebene • UI as JSON • Basic Catalog • Custom Catalogs Tactics Architectue as Guardrail • Server: Request A2UI via prompt • Client: Render A2UI • Tidy by Design • DSL → A2UI • Cache A2UI w/o data 40 sec → 0.1 sec 54
45. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Let's build the next "Killer App" … 55
46. 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 56