Agentic UI in the Frontend: Architectures with Open Standards @JAX 2026 in Mainz

Transcript

1. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Agentic UI in the Frontend: Architectures with Open Standards ANGULARarchitects.io
2. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2
3. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 DEMO
4. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 Agent LLM Tools Component Agent Client Tools HTTP (SSE, Web Sockets, etc.) Backend Frontend
5. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Agent LLM Tools Component Agent Client Tools HTTP (SSE, Web Sockets, etc.) Backend Frontend
6. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 How to communicate with the Agent? How to prevent coupling to the server stack and LLM?
7. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 How to support dynamic UI as an answer from the Agent?
8. •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
9. •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
10. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 Agentic UI 101
11. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 User Intent Agent LLM Tools Component {xor} Structured Output General Flow
12. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 DEMO
13. •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?
14. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 AG-UI for Agent Communication
15. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Agent LLM Tools Component Agent Client Tools {xor} HTTP (SSE, Web Sockets, etc.) Backend Frontend
16. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Agent LLM Tools Component Agent Client Tools {xor} HTTP (SSE, Web Sockets, etc.) Backend Frontend
17. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 Abstracting Server Stack Abstracting LLM Streaming Events Transport- Agnostic We Need a Protocol! SSE, WebSockets, …
18. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18
19. •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
20. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten •Kotlin •Golang •Dart •Java/ Spring AI •Rust •.NET •Nim •Flowise •Langflow 20 SDKs
21. •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
22. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 DEMO Branch: agentic
23. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 A2UI: Dynamic UI
24. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Idea Agent LLM Agent Client Request Request Textual Answer Textual Answer
25. •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)
26. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26
27. •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", }
28. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • React • Lit (Web Components) • Angular • Flutter • Adroid (Q2/2026) 28 Renderer
29. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 Characteristics No foreign code A2UI: Structure Client: Rendering Client: Event Handler
30. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 DEMO Branch: a2ui-dynamic
31. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 MCP Apps: Visual Tools
32. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 Agent with Tool Calling Agent LLM Tools
33. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 Model Context Protocol (MCP) Agent LLM Tools Other System stdin/stdout, HTTP, SSE, …
34. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • TypeScript • Python • C# • Go • Java • Rust • Swift • Ruby • PHP • Kotlin 34 SDKs
35. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 35
36. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36 Characteristics Provides Client-Code Sandbox Host Context: Theme, Size, … Messaging w/ Widget
37. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 37 DEMO Branch: mcp-apps
38. •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
39. •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
40. •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