Share
Embed

Slide 1

Slide 1 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Agentic UI with Open Standards: AG-UI, A2UI, and MCP Apps - When Do You Need Which? ANGULARarchitects.io

Slide 2

Slide 2 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Let's imagine a "Killer App" … 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten How to visualize • Zweite Ebene tools provided by other systems? 21

Slide 12

Slide 12 text

Mastertextformat bearbeiten Agenda 1) AG-UI: Agent Communication • Textmasterformat bearbeiten 2) A2UI: Dynamic/ Generative UI • Zweite Ebene 3) MCP Apps: Visual Tools 22

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 27

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 31

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 33

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 35

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Mastertextformat A2UI Express Example bearbeiten • Textmasterformat bearbeiten root = Column([ Text("## Passenger"), Text($/passenger/name, "body") ]) • Zweite Ebene 37

Slide 26

Slide 26 text

Mastertextformat bearbeiten Catalogs • Basic Catalog • Textmasterformat bearbeiten https://a2ui.org/reference/components/ • Zweite Ebene • Custom Catalogs: Components + Functions + Metadata 38

Slide 27

Slide 27 text

Mastertextformat bearbeiten Renderer • React • Textmasterformat bearbeiten • Lit (Web Components) • Zweite Ebene • Angular • Flutter • Dart • Android • SwiftUI, iOS 43

Slide 28

Slide 28 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 44

Slide 29

Slide 29 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten How to useEbene tools provided by • Zweite other systems? 45

Slide 30

Slide 30 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene MCP Apps 46

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 48

Slide 33

Slide 33 text

Agentic UI with Angular Mastertextformat bearbeiten Architectures with Open Standards • Textmasterformat bearbeiten 220+ pages, PDF, EPUB • Zweite Ebene Regular Free Updates! agentic-angular.com 49

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Mastertextformat bearbeiten Manfred Steyer •[LinkedIn, Textmasterformat bearbeiten Twitter, Facebook] Manfred Steyer [web] ANGULARarchitects.io • Zweite Ebene Slides, Examples, Book @ Manfred Steyer 52