Share
Embed

Slide 1

Slide 1 text

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

Slide 4

Slide 4 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 DEMO

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 7 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 8 How to support dynamic UI as an answer from the Agent?

Slide 8

Slide 8 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 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 10 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 11 Agentic UI 101

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 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 19

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 20 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 21 SDKs

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25

Slide 22

Slide 22 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 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 28 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 • Adroid (Q2/2026) 29 Renderer

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 40 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 36

Slide 36 text

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