Share
Embed

Slide 1

Slide 1 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Agentic UI 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 13

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 How to communicate with the Agent? How to prevent coupling to the server stack and LLM?

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 1) AG-UI: Agent Communication 2) A2UI: Dynamic UI Agenda

Slide 19

Slide 19 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 About Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io

Slide 20

Slide 20 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 How to communicate with the Agent? How to prevent coupling to the server stack and LLM?

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 AG-UI for Agent Communication

Slide 23

Slide 23 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten •TypeScript •Python •Kotlin •Golang •Dart •Langflow •Java •Rust •.NET •Nim •Flowise 27 SDKs

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 34 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 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 38 Architectures with Open Standards Agentic UI with Angular PDF, EPUB Regular Free Updates! Q3/2026 Waiting List: (Early Bird Discount) agentic-angular.com

Slide 37

Slide 37 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 39 Conclusion Agentic AI/UI • Intent • Autonomy • Tools Standards • AG-UI • A2UI • … Tactics • Zod & JSON Schema • Processing Messages (Text, Widgets, Tools)

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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