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

Transcript

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 2
3. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Some Challenges for our Dashboard … 3
4. Mastertextformat Dashboard from Hell bearbeiten … • Textmasterformat bearbeiten • Zweite Ebene 4
5. Mastertextformat bearbeiten Trade-off • Textmasterformat bearbeiten Autonomy • Zweite Ebene Control 5
6. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene It Takes Some Time … 6
7. Mastertextformat bearbeiten Timing • Textmasterformat bearbeiten Just A2UI • Zweite Ebene • 40 sec • 46,000 Tokens Optimized • 0.1 sec • 1,500 Tokens 7
8. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to support • Zweite Ebene dynamic UI as an answer from the agent? 12
9. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to control results? 13
10. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to optimize performance? 14
11. Mastertextformat bearbeiten Agenda 1) A2UI: Dynamic/ Generative UI • Textmasterformat bearbeiten 2) DSLs & A2UI • Zweite Ebene 3) Caching A2UI 15
12. 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 16
13. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to support • Zweite Ebene dynamic UI as an answer from the agent? 17
14. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 18
15. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene A2UI: Dynamic UI 19
16. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 20
17. 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" } } 21
18. Mastertextformat bearbeiten Catalogs • Basic Catalog • Textmasterformat bearbeiten https://a2ui.org/reference/components/ • Zweite Ebene • Custom Catalogs: Components + Functions + Metadata 22
19. Mastertextformat Create Surface Message bearbeiten { "version": "v0.9", "createSurface": { "surfaceId": "demo", "catalogId": "http://...", }, • Textmasterformat bearbeiten • Zweite Ebene } 23
20. Mastertextformat Update Components bearbeiten Message { "version": "v0.9", "updateComponents": { "surfaceId": "demo", "components": [ { "id": "root", "component": "Column", "children": […], }, […] ] } • Textmasterformat bearbeiten • Zweite Ebene } 24
21. Mastertextformat Update Data Modelbearbeiten Message { "version": "v0.9", updateDataModel: { surfaceId: "demo", path: "/passenger", value: { id: 42, name: 'John Doe' }, } • Textmasterformat bearbeiten • Zweite Ebene } 25
22. Mastertextformat Delete Surface Message bearbeiten { "deleteSurface": { "surfaceId": "demo", }, • Textmasterformat bearbeiten } • Zweite Ebene 26
23. Mastertextformat bearbeiten Renderer • React • Textmasterformat bearbeiten • Lit (Web Components) • Zweite Ebene • Angular • Flutter • Dart • Android • SwiftUI, iOS 27
24. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Consuming A2UI 28
25. Mastertextformat bearbeiten LLM • Textmasterformat bearbeiten • Zweite Ebene Agent Backend Tools HTTP (SSE) Client Runtime Frontend 29
26. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 30
27. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to control results? 31
28. Mastertextformat Dashboard from Hell bearbeiten … • Textmasterformat bearbeiten • Zweite Ebene 32
29. Mastertextformat Combine 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 33
30. Mastertextformat bearbeiten Alternative LLM • Textmasterformat bearbeiten Request(s) • Zweite Ebene UI Surface (app specific DSL) Agent UI Surface (A2UI) Request Agent Client 34
31. 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" } 35
32. Mastertextformat bearbeiten • Textmasterformat bearbeiten How to take care of • Zweite Ebene performance? 36
33. Mastertextformat Cache Everything but bearbeiten Data Model { "version": "v0.9", updateDataModel: { surfaceId: "demo", path: "/passenger", value: passenger, } • Textmasterformat bearbeiten • Zweite Ebene } 37
34. Mastertextformat Optimized Workflow bearbeiten • Textmasterformat bearbeiten Cache • Zweite Ebene LLM DSL A2UI Structure A2UI A2UI Data 38
35. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 39
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 40
37. 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 41
38. 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 42