Share
Embed

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 Let's imagine a „Killer App“ … 2

Slide 3

Slide 3 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene VisiCalc, 1979 3

Slide 4

Slide 4 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene "Really, we need to chat now?" 4

Slide 5

Slide 5 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene To chat or not to chat … … that's the wrong question! 5

Slide 6

Slide 6 text

Mastertextformat High Level View onbearbeiten Agentic AI • Textmasterformat bearbeiten • Zweite Ebene User Intent Iterative Autonomous Behavior Goal Tool Access 6

Slide 7

Slide 7 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 7

Slide 8

Slide 8 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 14

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 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 28

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 30

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 32

Slide 23

Slide 23 text

Mastertextformat bearbeiten Idea LLM • Textmasterformat bearbeiten Request(s) • Zweite Ebene UI Surface (A2UI) Agent UI Surface (A2UI) Request Agent Client 33

Slide 24

Slide 24 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" } } 34

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Mastertextformat Update Data Modelbearbeiten Message { "version": "v0.9", updateDataModel: { surfaceId: "demo", path: "/passenger", value: passenger, } • Textmasterformat bearbeiten • Zweite Ebene } 38

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Consuming A2UI 41

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 43

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Mastertextformat You Need to Combine bearbeiten Guardrails! • Textmasterformat bearbeiten • Zweite Ebene 47

Slide 38

Slide 38 text

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

Slide 39

Slide 39 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" } 49

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 52

Slide 43

Slide 43 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 53

Slide 44

Slide 44 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 54

Slide 45

Slide 45 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Let's build the next "Killer App" … 55

Slide 46

Slide 46 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 56