Share
Embed

Slide 1

Slide 1 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Human in the Loop Beyond Approval: Toward True Collaboration ANGULARarchitects.io

Slide 2

Slide 2 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 2

Slide 3

Slide 3 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten Autonomous Systems can lead to • Zweite Ebene Mistrust and Fear 3

Slide 4

Slide 4 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 4

Slide 5

Slide 5 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten Selected Patterns for • Zweite Ebene Human in the Loop Patterns 5

Slide 6

Slide 6 text

Mastertextformat bearbeiten Transparency • Textmasterformat bearbeiten • Zweite Ebene 6

Slide 7

Slide 7 text

Mastertextformat bearbeiten Transparency • Textmasterformat bearbeiten • Zweite Ebene 7

Slide 8

Slide 8 text

Mastertextformat Kill Switch bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 8

Slide 9

Slide 9 text

Mastertextformat bearbeiten Approval • Textmasterformat bearbeiten • Zweite Ebene 9

Slide 10

Slide 10 text

Mastertextformat Action Cards bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 10

Slide 11

Slide 11 text

Mastertextformat Questions and Options bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 11

Slide 12

Slide 12 text

Co-Planning Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 12

Slide 13

Slide 13 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 13

Slide 14

Slide 14 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene How to implement these patterns? 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten AG-UI Events • Zweite Ebene for Transparency 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 19

Slide 20

Slide 20 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 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Using AG-UI via CopilotKit 22

Slide 23

Slide 23 text

Mastertextformat bearbeiten CopilotKit • Textmasterformat bearbeiten • Zweite Ebene 23

Slide 24

Slide 24 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 24

Slide 25

Slide 25 text

Mastertextformat Using CopilotKit bearbeiten const agentStore = injectAgentStore('myAgent'); • Textmasterformat bearbeiten • Zweite Ebene 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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(); […] 28

Slide 29

Slide 29 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO: AG-UI Events for Questions 29

Slide 30

Slide 30 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO: AG-UI Interrupts 30

Slide 31

Slide 31 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO: Action-Cards for Visualizing Server-Tools 31

Slide 32

Slide 32 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO: AG-UI State for Co-Creation 32

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 33

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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