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

Embed

Start on current slide

Slide 1

Slide 1 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene A2UI as an Architecture Question: Agentic UI Between AI Freedom and Control ANGULARarchitects.io

Slide 2

Slide 2 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 2

Slide 3

Slide 3 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Some Challenges for our Dashboard … 3

Slide 4

Slide 4 text

Mastertextformat Dashboard from Hell bearbeiten … • Textmasterformat bearbeiten • Zweite Ebene 4

Slide 5

Slide 5 text

Mastertextformat bearbeiten Trade-off • Textmasterformat bearbeiten Autonomy • Zweite Ebene Control 5

Slide 6

Slide 6 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene It Takes Some Time … 6

Slide 7

Slide 7 text

Mastertextformat bearbeiten Timing • Textmasterformat bearbeiten Just A2UI • Zweite Ebene • 40 sec • 46,000 Tokens Optimized • 0.1 sec • 1,500 Tokens 7

Slide 8

Slide 8 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten How to support • Zweite Ebene dynamic UI as an answer from the agent? 12

Slide 9

Slide 9 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to control results? 13

Slide 10

Slide 10 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to optimize performance? 14

Slide 11

Slide 11 text

Mastertextformat bearbeiten Agenda 1) A2UI: Dynamic/ Generative UI • Textmasterformat bearbeiten 2) DSLs & A2UI • Zweite Ebene 3) Caching A2UI 15

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten How to support • Zweite Ebene dynamic UI as an answer from the agent? 17

Slide 14

Slide 14 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 18

Slide 15

Slide 15 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene A2UI: Dynamic UI 19

Slide 16

Slide 16 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 20

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Mastertextformat bearbeiten Catalogs • Basic Catalog • Textmasterformat bearbeiten https://a2ui.org/reference/components/ • Zweite Ebene • Custom Catalogs: Components + Functions + Metadata 22

Slide 19

Slide 19 text

Mastertextformat Create Surface Message bearbeiten { "version": "v0.9", "createSurface": { "surfaceId": "demo", "catalogId": "http://...", }, • Textmasterformat bearbeiten • Zweite Ebene } 23

Slide 20

Slide 20 text

Mastertextformat Update Components bearbeiten Message { "version": "v0.9", "updateComponents": { "surfaceId": "demo", "components": [ { "id": "root", "component": "Column", "children": […], }, […] ] } • Textmasterformat bearbeiten • Zweite Ebene } 24

Slide 21

Slide 21 text

Mastertextformat Update Data Modelbearbeiten Message { "version": "v0.9", updateDataModel: { surfaceId: "demo", path: "/passenger", value: { id: 42, name: 'John Doe' }, } • Textmasterformat bearbeiten • Zweite Ebene } 25

Slide 22

Slide 22 text

Mastertextformat Delete Surface Message bearbeiten { "deleteSurface": { "surfaceId": "demo", }, • Textmasterformat bearbeiten } • Zweite Ebene 26

Slide 23

Slide 23 text

Mastertextformat bearbeiten Renderer • React • Textmasterformat bearbeiten • Lit (Web Components) • Zweite Ebene • Angular • Flutter • Dart • Android • SwiftUI, iOS 27

Slide 24

Slide 24 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Consuming A2UI 28

Slide 25

Slide 25 text

Mastertextformat bearbeiten LLM • Textmasterformat bearbeiten • Zweite Ebene Agent Backend Tools HTTP (SSE) Client Runtime Frontend 29

Slide 26

Slide 26 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 30

Slide 27

Slide 27 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to control results? 31

Slide 28

Slide 28 text

Mastertextformat Dashboard from Hell bearbeiten … • Textmasterformat bearbeiten • Zweite Ebene 32

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Mastertextformat bearbeiten Alternative LLM • Textmasterformat bearbeiten Request(s) • Zweite Ebene UI Surface (app specific DSL) Agent UI Surface (A2UI) Request Agent Client 34

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten How to take care of • Zweite Ebene performance? 36

Slide 33

Slide 33 text

Mastertextformat Cache Everything but bearbeiten Data Model { "version": "v0.9", updateDataModel: { surfaceId: "demo", path: "/passenger", value: passenger, } • Textmasterformat bearbeiten • Zweite Ebene } 37

Slide 34

Slide 34 text

Mastertextformat Optimized Workflow bearbeiten • Textmasterformat bearbeiten Cache • Zweite Ebene LLM DSL A2UI Structure A2UI A2UI Data 38

Slide 35

Slide 35 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 39

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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