Emerging UI for communicating agentic states
April 25th, 2024
What are the Emerging UI Patterns for Communicating Agentic States? ๐ค๐ก
The following patterns reflect how ๐๐ ๐ฎ๐ด๐ฒ๐ป๐๐ ๐ฐ๐ผ๐บ๐บ๐๐ป๐ถ๐ฐ๐ฎ๐๐ฒ ๐๐ต๐ฒ๐ถ๐ฟ ๐ถ๐ป๐๐ฒ๐ป๐, ๐ฝ๐ฟ๐ผ๐ด๐ฟ๐ฒ๐๐, ๐ฎ๐ป๐ฑ ๐ฑ๐ฒ๐ฐ๐ถ๐๐ถ๐ผ๐ป๐, and how users ๐ค interact with or observe ๐ these processes.
๐ญ.๐๐ผ๐ป๐๐ฒ๐ฟ๐๐ฎ๐๐ถ๐ผ๐ป๐ฎ๐น ๐ฃ๐ฟ๐ผ๐บ๐ฝ๐ ๐๐ป๐๐ฒ๐ฟ๐ณ๐ฎ๐ฐ๐ฒ
State Feedback: Agent shows Chain of Thought (COT), clear handoff between human โ๏ธ agent.
Visual Cues: Typing or progress indicator
Ideal for: Customer support chat interface, Task initiation & progress in a coding application or shell/command-style UIs.
๐ฎ. ๐๐ด๐ฒ๐ป๐ ๐๐ต๐ฎ๐ถ๐ป ๐๐ถ๐๐ฐ๐น๐ผ๐๐๐ฟ๐ฒ (๐ ๐๐น๐๐ถ-๐ฆ๐๐ฒ๐ฝ)
State Feedback: Agent shows decomposed steps (e.g., "Step 1: Researchingโฆ"). Progressively updates UI as it progresses.
Visual Cues: Step checkboxes, Chat bubbles, Message threads, Loading states for each step.
Ideal For: Deep Research, Analysis or multi-hop reasoning in a Search app
๐ฏ. ๐ฉ๐ถ๐๐๐ฎ๐น ๐ช๐ผ๐ฟ๐ธ๐ณ๐น๐ผ๐ ๐๐ด๐ฒ๐ป๐
State Feedback: Flow diagrams show data moving through agent stages. Users see which source โ action โ destination path was followed.
Visual Cues: Node/edge highlights, path animations, input/output overlays.
Ideal For:Automation builders, marketers, multi-channel workflows.