Components

The patterns as components

The pattern pages describe what the person and the agent do. This is where that gets built: each published pattern ships as a production React component, a headless core (explicit state machine, full keyboard and ARIA) with a styled skin and vendor presets. You vendor the source, with no runtime dependency on us. MIT licensed.

STORYBOOK Full docs, every state and preset, props tables, and evidence-backed Do/Don't guidance — operate every component live. OPEN STORYBOOK →

Shipped

<ApprovalGate>

pattern: established code: beta

The person sees the action the agent is about to take and decides on that version of it before it happens.

npx shadcn add @agentsandhumans/approval-gate
Install & docs → Operate it in Storybook →

<PlanPreview>

pattern: established code: beta

The person reviews and edits the agent's intended steps before it starts.

npx shadcn add @agentsandhumans/plan-preview
Install & docs → Operate it in Storybook →

<ProgressTrace>

pattern: established code: beta

The person watches what the agent is doing right now, at a glance or step by step.

npx shadcn add @agentsandhumans/progress-trace
Install & docs → Operate it in Storybook →

<EvalComparison>

pattern: watching code: beta

The person compares a candidate prompt version with the baseline across an eval set and decides, case by case, what got better, what got worse and what to do about it.

npx shadcn add @agentsandhumans/eval-comparison
Install & docs → Operate it in Storybook →

<EvalSetAuthoring>

pattern: watching code: experimental

The person collects real examples and writes down, beside them, what a good answer does and does not do, with a passing and a failing answer per rule and the set versioned with the prompt.

npx shadcn add @agentsandhumans/eval-set-authoring
Install & docs → Operate it in Storybook →

<EmergencyStop>

pattern: watching code: experimental

The person halts one agent, its team or the whole account in one press.

npx shadcn add @agentsandhumans/emergency-stop
Install & docs → Operate it in Storybook →

<Interruption>

pattern: emerging code: experimental

The person pauses, stops or redirects an agent mid-task.

npx shadcn add @agentsandhumans/interruption
Install & docs → Operate it in Storybook →

<Recovery>

pattern: emerging code: experimental

The person restores the checkpoint, retries a failed step when a second run cannot repeat a side effect, or takes the work over and hands it back.

npx shadcn add @agentsandhumans/recovery
Install & docs → Operate it in Storybook →

On the roadmap

Planned — each follows its pattern's anatomy once the anatomy stabilizes. The wireframe is the shape of what will ship.

Context

Shaping what the agent knows before it starts, and seeing where that knowledge came from.

planned — follows the pattern's anatomy

The pattern →

Memory

Knowing what the agent remembers about you, and being able to correct it.

planned — follows the pattern's anatomy

The pattern →

Review

Judging what an agent produced, fast and on the record.

planned — follows the pattern's anatomy

The pattern →

Delegation

Handing an agent a piece of work so it understands the job the way you do.

planned — follows the pattern's anatomy

The pattern →

Human Handoff

Receiving finished or blocked work from an agent with enough to judge it.

planned — follows the pattern's anatomy

The pattern →

Agent-to-Agent

Keeping work legible when agents hand it to each other.

planned — follows the pattern's anatomy

The pattern →

Background Execution

Handing work to an agent, walking away, and coming back without losing the thread.

planned — follows the pattern's anatomy

The pattern →

Generative UI

Trusting controls an agent built on the spot inside your product.

planned — follows the pattern's anatomy

The pattern →

Observability

Understanding what an agent did and why, after the fact.

planned — follows the pattern's anatomy

The pattern →

Agent Identity

Telling agent work from human work, in the product and outside it.

planned — follows the pattern's anatomy

The pattern →

Permissions

Granting an agent standing access, and being able to see and revoke it.

planned — follows the pattern's anatomy

The pattern →