Share
Embed

Slide 1

Slide 1 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Agentic UI in the Frontend: Architectures with Open Standards ANGULARarchitects.io

Slide 2

Slide 2 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2

Slide 3

Slide 3 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 DEMO

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 1) Agentic UI 101 2) AG-UI: Agent Communication 3) A2UI: Dynamic UI 4) MCP Apps: Visual Tools Agenda

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 Agentic UI 101

Slide 11

Slide 11 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 User Intent Agent LLM Tools Component {xor} Structured Output General Flow

Slide 12

Slide 12 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 DEMO

Slide 13

Slide 13 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 • Separate System Prompt and User Prompt (Prompt Injection !!) • Tools and Tool Calling via API • Structured Output via API • Agent Design: Guardrails, Eval, … • … What‘s Different in Real Life?

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Agent LLM Tools Component Agent Client Tools {xor} HTTP (SSE, Web Sockets, etc.) Backend Frontend

Slide 16

Slide 16 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Agent LLM Tools Component Agent Client Tools {xor} HTTP (SSE, Web Sockets, etc.) Backend Frontend

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18

Slide 19

Slide 19 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 20

Slide 20 text

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

Slide 21

Slide 21 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 Selected Message Types Run • Started • Finished • Error Text Message • Start • Content • End Tool Call • Start • Args • End • Result

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Idea Agent LLM Agent Client Request Request Textual Answer Textual Answer

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26

Slide 27

Slide 27 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 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 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 MCP Apps: Visual Tools

Slide 32

Slide 32 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 Agent with Tool Calling Agent LLM Tools

Slide 33

Slide 33 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 Model Context Protocol (MCP) Agent LLM Tools Other System stdin/stdout, HTTP, SSE, …

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 35

Slide 36

Slide 36 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36 Characteristics Provides Client-Code Sandbox Host Context: Theme, Size, … Messaging w/ Widget

Slide 37

Slide 37 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 37 DEMO Branch: mcp-apps

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 39 1) AG-UI as Backbone: Decoupling from server stack 2) AG-UI Event --> Client selects component 3) A2UI for dynamic UI 4) MCP Apps for visual tools Conclusion

Slide 40

Slide 40 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 40 [LinkedIn, Twitter, Facebook] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides, Examples, Book Remote Company Workshops and Consulting http://angulararchitects.io