Share
Embed

Slide 1

Slide 1 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Agentic UI beyond Chats Architecture Patterns & Open 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 13 Agent LLM Tools Component UI Runtime Tools HTTP (SSE, Web Sockets, etc.) Backend Frontend

Slide 12

Slide 12 text

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

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 Abstracting Server Stack Abstracting LLM Streaming Events Transport- Agnostic We Need a Protocol! SSE, WebSockets, …

Slide 15

Slide 15 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17

Slide 16

Slide 16 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 18 Supported Integrations

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22

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 Architectures with Open Standards Agentic UI with Angular PDF, EPUB Regular Free Updates! Q3/2026 Waiting List: (Early Bird Discount) agentic-angular.com

Slide 34

Slide 34 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36 http://angulararchitects.io/agentic July 2026

Slide 35

Slide 35 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 37 Conclusion Agentic AI/UI • Intent • Autonomy • Tools Standards • AG-UI • A2UI • MCP Apps Components • Catalog • Markup (A2UI) • Tools (MCP)

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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