top of page

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.

Are there more?
Let me know in the comments or DM me

#GenerativeAI #productmanagement #ProductDesign #DataScience #uiux #DesignThinking #ArtificialIntelligence
bottom of page