Share
Embed

Slide 1

Slide 1 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Agentic AI & UI: Arcitecture, HITL, Emerging Standards ANGULARarchitects.io

Slide 2

Slide 2 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Let‘s imagine a „Killer App“ … 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8

Slide 8

Slide 8 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9

Slide 9

Slide 9 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10

Slide 10

Slide 10 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11

Slide 11

Slide 11 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12

Slide 12

Slide 12 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Agent LLM Tools Component UI Runtime Tools HTTP (SSE, Web Sockets, etc.) Backend Frontend

Slide 13

Slide 13 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Harness LLM Tools Component UI Runtime Tools HTTP (SSE, Web Sockets, etc.) Backend Frontend Agentic System

Slide 14

Slide 14 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Agent LLM Tools Component UI Runtime Tools HTTP (SSE, Web Sockets, etc.) Backend Frontend

Slide 15

Slide 15 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 Abstracting Server Stack Abstracting LLM Streaming Events Transport- Agnostic We Need a Protocol! SSE, WebSockets, …

Slide 16

Slide 16 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18

Slide 17

Slide 17 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • LangGraph • CrewAI • Microsoft Agent Framework • Google ADK • AWS Strands Agents • AWS Bedrock AgentCore • Mastra • Pydantic AI • Agno • LlamaIndex • AG2 • AWS Bedrock Agents • OpenAI Agent SDK • Cloudflare Agents 19 Supported Integrations

Slide 18

Slide 18 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten •TypeScript •Python •Kotlin •Golang •Dart •Langflow •Java/ Spring AI •Rust •.NET •Nim •Flowise 20 SDKs

Slide 19

Slide 19 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 DEMO Branch: agentic

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23

Slide 22

Slide 22 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Idea Agent LLM Agent Client Request Request(s) UI Surface (A2UI or minimal DSL) UI Surface (A2UI)

Slide 23

Slide 23 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Example { "id": "root", "children": ["headline", "name", "..."] } { "id": "name", "component": "Text", "variant": "body" "text": { "path": "/passenger/name" } } { "id": "headline", "component": "Text", "variant": "h2" "text": "Passenger", }

Slide 24

Slide 24 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • React • Lit (Web Components) • Angular • Flutter • Android (Q2/2026) 26 Renderer

Slide 25

Slide 25 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 Characteristics No foreign code A2UI: Structure Client: Rendering Client: Event Handler

Slide 26

Slide 26 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 DEMO Branch: a2ui-dynamic

Slide 27

Slide 27 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 How to use tools provided by other systems?

Slide 28

Slide 28 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 Model Context Protocol (MCP) Agent LLM Tools Other System

Slide 29

Slide 29 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • TypeScript • Python • C# • Go • Java • Rust • Swift • Ruby • PHP • Kotlin 31 SDKs

Slide 30

Slide 30 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32

Slide 31

Slide 31 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 MCP Apps Visualize Tool Results Provides Client Code Sandbox Host Context: Theme, Size, … Messaging w/ Widget

Slide 32

Slide 32 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 34

Slide 33

Slide 33 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 35 Autonomous Systems can lead to Mistrust and Fear

Slide 34

Slide 34 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36

Slide 35

Slide 35 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 37

Slide 36

Slide 36 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 38 Human in the Loop (HITL) Selected Patterns

Slide 37

Slide 37 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 39 Transparency

Slide 38

Slide 38 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 40 Transparency

Slide 39

Slide 39 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 41 Kill Switch

Slide 40

Slide 40 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 42 Approval

Slide 41

Slide 41 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 43 Action Cards

Slide 42

Slide 42 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 44 Questions and Options

Slide 43

Slide 43 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 45 Co-Planning

Slide 44

Slide 44 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 46

Slide 45

Slide 45 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 47 Conclusion Agentic AI/UI • Intent • Autonomy • Tools Standards • AG-UI • A2UI • MCP Apps HITL • Transparency • Approval++ • Co-Planning

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 49 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io