Introduction

What is Depute?

Depute (verb meaning to appoint or delegate).

Depute is a React component library for Agentic Experience (AX) design — purpose-built UI primitives for AI agent supervision and human oversight.

When an AI agent runs in your product, users need to see what's happening — not raw logs, but structured UI for delegation, trust, and control.

Why Depute?

Most UI libraries build for CRUD apps. Depute builds for the moment after you hand off work to an agent:

• The agent proposes a plan → Plan Card shows it before execution
• The agent wants to send email → Approval Gate blocks until the user approves
• The agent is running → Run Controls let the user pause or stop at any time
• Multiple agents are coordinating → Orchestrator View shows who's managing whom

A toolkit for both Builders and Auditors: For Product Engineers, Depute provides the UI to stop users from feeling anxious and losing context during long autonomous runs. For Security & Risk Teams, Depute is compliance infrastructure. Under emerging governance standards—like the Singapore IMDA Agentic AI Governance Framework (Jan 2026)—providing escalation paths, defining UI checkpoints for high-stakes actions, and making humans "meaningfully accountable" is a primary regulatory expectation. Depute helps you operationalize those governance requirements in code.

Defeating Cognitive Failures

Human-automation research shows that humans are terrible at passively monitoring highly autonomous systems. When working with AI agents, users fall into predictable cognitive traps. Depute maps its primitives directly against these known failures:

• Automation Bias: Users blindly rubber-stamp agent actions without scrutiny → Mitigated by an Automation Bias Alert and Confidence Meter
• Execution Amnesia: Users lose track of the total "blast radius" of a massive agent session → Mitigated by a Session Overview and State Diff
• Responsibility Diffusion: Users approve actions assuming the machine is accountable → Mitigated by a Decision Record and Binding Approval

Mitigating Systemic Threats

While Cognitive Failures describe UX traps, Systemic Threats describe catastrophic operational failure modes increasingly targeted by international AI legislation (e.g., IMDA Systemic Threats). Depute's components function as active algorithmic firebreaks:

• Cascading Failures: An agentic error pollutes downstream autonomous systems rapidly → Contained by a Swarm Monitor and Orchestrator View
• Hallucinated Planning: An agent proposes a destructive or nonsensical sequence of tools → Exposed by a Plan Card and Confidence Meter
• Rogue Tool Use: An agent attempts an irreversible action out-of-bounds → Blocked by an Approval Gate and Tool Trace
• Unpredictable Outcomes: A run completes with thousands of opaque, unlogged side effects → Audited with a State Diff and Session Overview

Use-Case Index (Problem-First)

Not sure which component to use? Press ⌘K to search by problem. The docs are mapped to UX challenges (e.g., search for "cognitive load" or "context switch").

Or start here:

• "I need to safely switch agent focus across a swarm" → Use an Orchestrator View + Shared Context Ledger
• "I need to stop an agent from making an unrecoverable mistake" → Use an Approval Gate + Tool Trace
• "I need to show the user what the agent is thinking" → Use a Plan Card + Confidence Meter
• "I need to prevent users from blindly rubber-stamping approvals" → Use an Automation Bias Alert wrapping an Approval Gate
• "I need a binding cryptographic signature for a ledger mutation" → Use a Binding Approval + Transaction Receipt
• "I need to roll back a sequence of 40 API calls" → Use a Rollback Timeline + State Diff

Distribution model

Components are delivered via CLI copy-paste (like shadcn/ui). The source lands in your repo — you own it, you can read it, you can modify it.

npx ax-depute@latest add approval-gate

No lock-in. No black-box npm package the agent can't inspect.

The AI Skill Layer

You aren't the only one building this app—your AI agent is too. Depute ships with a native Skill Layer built for Claude Code, Cursor, and Copilot.

When you install a component, you get the UI code for the human and the structural reasoning instructions for your AI agent. The skill teaches your agent exactly when to use an ApprovalGate versus a RunControls boundary, ensuring the UI your agent helps you build is the same UI your agent knows how to use.

npx ax-depute@latest init

This command drops a skills/depute/SKILL.md file into your project, automatically giving Claude Code, Cursor, or Copilot deep intelligence on how to use Depute's primitives in your specific codebase.

Three tiers

Component Architecture

To help you quickly understand how to compose the library, every component in the sidebar is explicitly tagged with its architectural classification. You will see these taxonomy badges next to every component name:

• Primitive A foundational, single-responsibility building block (e.g., PlanCard, ApprovalGate).
• View A compositional surface that aggregates multiple primitives into a larger macro-interface (e.g., OrchestratorView, SwarmInbox).
• Control An operational or forensic surface used to halt, direct, or audit execution (e.g., EscalationRouter, DecisionRecord).
• Pattern A highly specialized workflow wrapper designed to enforce a specific behavioral policy (e.g., AutomationBiasAlert, HandoffProtocol).

Start with Single Agent primitives. Add Multi-Agent when you need orchestration.

Components in the sidebar are ordered by solution patterns — the sequence you'd encounter them when building a complete agent interaction, not alphabetically.