agentic-ui

Present intent previews, autonomy controls, and streaming states for AI workflows.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill agentic-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: agentic-ui
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/agentic-ui
Command: npx skills add https://github.com/andersoncollab/design-agent --skill agentic-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Users struggle to trust and control AI actions when decisions happen outside chat, especially during multi-step workflows, streaming output, tool usage, and failures.

Core Features & Use Cases

  • Intent Preview: Show users exactly what the AI will do before execution with Approve/Edit/Cancel and affected-item details.
  • Autonomy Control: Let users choose Manual, Supervised, or Autonomous behavior per feature to match their trust level.
  • Task Decomposition UI: Break goals into visible steps with per-step status, progress, and approve/reject controls.
  • Streaming States + Stop: Provide token-streaming UX with differentiated “thinking/searching/generating” states and an always-available stop control.
  • Tool Call Cards + Citations: Display tool usage transparency (inputs/outputs/durations) and inline sources to support verification.
  • Confidence Indicators + Error Recovery: Communicate uncertainty with confidence rings and offer concrete recovery paths instead of dead-end failures.

Quick Start

Use the agentic-ui patterns to design an AI feature where users can preview the intended action, select autonomy level, watch streaming progress, review tool/citation details, and recover gracefully if something fails.

Frequently Asked Questions about agentic-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design agentic UI for multi-step AI workflows outside of chat?

Agentic UI for multi-step AI workflows uses intent previews, task decomposition, and progressive disclosure to make actions inspectable. This provides visible step-by-step status with approve/reject controls, ensuring trustworthy execution for non-chat applications.

What is intent preview in AI user interfaces?

Intent preview in AI user interfaces shows exactly what the AI will do before execution. It provides affected-item details and Approve, Edit, or Cancel options to ensure user control before autonomous actions are executed.

How do I show AI confidence levels and handle error recovery in non-chat apps?

Show AI confidence levels and handle error recovery in non-chat apps by communicating uncertainty with confidence rings and providing concrete recovery paths. This replaces dead-end failures with safe, reversible actions supported by citations.

How to display tool call transparency and streaming states in AI applications?

Display tool call transparency and streaming states in AI applications by showing tool usage inputs, outputs, and durations alongside token-streaming UX. Differentiate thinking, searching, and generating states with an always-available stop control.

Does this agentic UI approach work for database-backed updates and content generation?

Yes, this agentic UI approach works for database-backed updates and content generation. It applies to product workflows where an agent must execute multi-step actions with reversible, inspectable behavior and user approval options.

How do I let users choose between manual, supervised, and autonomous AI behavior?

Let users choose between manual, supervised, and autonomous AI behavior by implementing autonomy controls per feature. This matches the user's trust level, allowing them to select the degree of human oversight required for each task.