Human in the Loop Beyond Approval: Toward True Collaboration @FrontMania 2026 in Utrecht

Transcript

1. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Human in the Loop Beyond Approval: Toward True Collaboration ANGULARarchitects.io
2. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 2
3. Mastertextformat bearbeiten • Textmasterformat bearbeiten Autonomous Systems can lead to • Zweite Ebene Mistrust and Fear 3
4. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 4
5. Mastertextformat bearbeiten • Textmasterformat bearbeiten Selected Patterns for • Zweite Ebene Human in the Loop Patterns 5
6. Mastertextformat bearbeiten Transparency • Textmasterformat bearbeiten • Zweite Ebene 6
7. Mastertextformat bearbeiten Transparency • Textmasterformat bearbeiten • Zweite Ebene 7
8. Mastertextformat Kill Switch bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 8
9. Mastertextformat bearbeiten Approval • Textmasterformat bearbeiten • Zweite Ebene 9
10. Mastertextformat Action Cards bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 10
11. Mastertextformat Questions and Options bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 11
12. Co-Planning Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 12
13. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 13
14. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to implement these patterns? 14
15. Mastertextformat bearbeiten Agenda 1) AG-UI Events for Transparency • Textmasterformat bearbeiten 2) Using AG-UI via CopilotKit • Zweite Ebene 3) AG-UI Interrupts for Questions 4) Action Cards for Visualizing Server-Tools 5) AG-UI State for Co-Creation 15
16. Mastertextformat About Me bearbeiten Manfred Steyer, ANGULARarchitects.io • Textmasterformat bearbeiten • Zweite Ebene (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular 16
17. Mastertextformat bearbeiten • Textmasterformat bearbeiten AG-UI Events • Zweite Ebene for Transparency 17
18. LLM Mastertextformat bearbeiten Backend • Textmasterformat bearbeiten Agent Tools • Zweite Ebene HTTP (SSE, Web Sockets, etc.) UI Runtime Component Tools Frontend 18
19. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 19
20. 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 20
21. Mastertextformat Selected Message Types bearbeiten • Textmasterformat bearbeiten Run • Zweite Ebene • Started • Finished • Error Text Message • Start • Content • End Tool Call • Start • Args • End • Result 21
22. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Using AG-UI via CopilotKit 22
23. Mastertextformat bearbeiten CopilotKit • Textmasterformat bearbeiten • Zweite Ebene 23
24. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 24
25. Mastertextformat Using CopilotKit bearbeiten const agentStore = injectAgentStore('myAgent'); • Textmasterformat bearbeiten • Zweite Ebene 25
26. Mastertextformat Using CopilotKit bearbeiten const agentStore = injectAgentStore('myAgent'); •agentStore().agent.addMessage({ Textmasterformat bearbeiten '1', role: 'user', content: 'Find my ticket ...' }); • id: Zweite Ebene agentStore().agent.runAgent(); 26
27. Mastertextformat Using CopilotKit bearbeiten const agentStore = injectAgentStore('myAgent'); •agentStore().agent.addMessage({ Textmasterformat bearbeiten '1', role: 'user', content: 'Find my ticket ...' }); • id: Zweite Ebene agentStore().agent.runAgent(); […] const messages = agentStore().messages(); 27
28. Mastertextformat Using CopilotKit bearbeiten const agentStore = injectAgentStore('myAgent'); •agentStore().agent.addMessage({ Textmasterformat bearbeiten '1', role: 'user', content: 'Find my ticket ...' }); • id: Zweite Ebene agentStore().agent.runAgent(); […] <copilot-chat agentId="weatherAgent" /> 28
29. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO: AG-UI Events for Questions 29
30. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO: AG-UI Interrupts 30
31. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO: Action-Cards for Visualizing Server-Tools 31
32. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO: AG-UI State for Co-Creation 32
33. Agentic UI with Angular Mastertextformat bearbeiten Architectures with Open Standards • Textmasterformat bearbeiten 220+ pages, PDF, EPUB • Zweite Ebene Regular Free Updates! agentic-angular.com 33
34. Mastertextformat bearbeiten Conclusion • Textmasterformat bearbeiten HITL • Zweite Ebene • Start: Transparency • More than Approval! Selected Patterns • Action Cards • Co Planning • Co Creation Implementation • AG-UI Events • AG-UI Interrupts • AG-UI State CopilotKit for Angular, React, Vue, … 34
35. Mastertextformat bearbeiten Manfred Steyer [LinkedIn, Twitter, Facebook] Manfred Steyer • Textmasterformat bearbeiten [web] ANGULARarchitects.io • Zweite Ebene Slides, Examples, Book Remote Company Workshops and Consulting http://angulararchitects.io @ Manfred Steyer 35