Generative UI & AI-Assistants for Your Angular Solutions

Transcript

1. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Generative UI & AI-Assistants for Your Angular Solutions ANGULARarchitects.io
2. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Let‘s imagine a „Killer App“ … 2
3. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 VisiCalc, 1979
4. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 "Really, we need to chat now?"
5. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 To chat or not to chat … … that's the wrong question!
6. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 User Intent Autonomous Behavior Goal High Level View on Agentic AI Iterative Tool Access
7. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 DEMO Branch: agentic-full
8. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Agent LLM Tools Component UI Runtime Tools HTTP (SSE, Web Sockets, etc.) Backend Frontend
9. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 Agent LLM Tools Component UI Runtime Tools HTTP (SSE, Web Sockets, etc.) Backend Frontend
10. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 How to communicate with the Agent? How to prevent coupling to the server stack and LLM?
11. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 How to support dynamic UI as an answer from the Agent?
12. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 1) AG-UI: Agent Communication 2) A2UI: Dynamic UI Agenda
13. •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
14. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 How to communicate with the Agent? How to prevent coupling to the server stack and LLM?
15. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Abstracting Server Stack Abstracting LLM Streaming Events Transport- Agnostic We Need a Protocol! SSE, WebSockets, …
16. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 AG-UI for Agent Communication
17. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25
18. •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
19. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten •TypeScript •Python •Kotlin •Golang •Dart •Langflow •Java •Rust •.NET •Nim •Flowise 27 SDKs
20. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 DEMO Branch: agentic-full
21. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 How to support dynamic UI as an answer from the Agent?
22. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30
23. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 A2UI: Generative UI
24. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32
25. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 Idea Agent LLM Agent Client Request Request(s) UI Surface (A2UI or minimal DSL) UI Surface (A2UI)
26. •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", }
27. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • React • Lit (Web Components) • Angular • Flutter • Android 35 Renderer
28. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36 DEMO Branch: agentic-full
29. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 37 Architectures with Open Standards Agentic UI with Angular PDF, EPUB Regular Free Updates! Q3/2026 Waiting List: (Early Bird Discount) agentic-angular.com
30. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 38 Conclusion Agentic AI/UI • Intent • Autonomy • Tools Standards • AG-UI • A2UI • … Tactics • JSON Schema • Processing Messages (Text, Widgets, Tools)
31. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 39 Let's build the next "Killer App" …
32. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 40 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io