Approval Card

Human-in-the-loop confirm/skip or multi-question approval before the agent acts.

Apply schema migration?

Creates table reorder_queue and two indexes.

Installation

Every AI component page installs the same aggregate @constructive/ai entry. Examples use the default @/components/ui alias; use your configured ui alias if it differs.

components.json

{
  "registries": {
    "@constructive": "https://constructive-io.github.io/blocks/r/{name}.json"
  }
}

Install aggregate

pnpm dlx shadcn@latest add @constructive/ai

When to use

Use ApprovalCard title and description mode for tool-confirm gates.
Use questions when the agent needs a multi-step questionnaire.

Usage

example.tsx

tsx

import { ApprovalCard } from '@/components/ui/ai';

<ApprovalCard
  title="Delete table customers?"
  destructive
  onConfirm={approve}
  onSkip={skip}
/>

API

Primary props for this surface. The installed source types are the full contract.

API for Approval Card.
Prop	Type	Behavior
title / description / destructive	ReactNode / boolean	Simple confirm mode.
questions / onConfirm / onSkip	ApprovalQuestion[] / callbacks	Multi-step or submit handlers.