ConfirmationCard Beta

ConfirmationCard requests user confirmation before the host app performs a write, delete, charge, send, status change, or destructive operation.

import { ConfirmationCard } from "@/components/fable-ui/confirmation-card/confirmation-card"

export function RefundConfirmation() {
  return (
    <ConfirmationCard
      id="refund-1007"
      title="Refund order 1007?"
      description="The host app will run the refund after confirmation."
      variant="warning"
      details={["Amount: EGP 420", "Reason: duplicate charge"]}

Installation#

pnpm dlx shadcn@latest add https://fable-ui.shobky.com/r/confirmation-card.json

Installed files include:

Copycomponents/fable-ui/confirmation-card/confirmation-card.tsx
components/fable-ui/confirmation-card/index.ts
lib/fable-ui/tools/request-confirmation-tool.ts
lib/fable-ui/manifests/request-confirmation.md

The component depends on shared Fable core plus shadcn card, button, and badge primitives.

Usage#

Copyimport { ConfirmationCard } from "@/components/fable-ui/confirmation-card/confirmation-card"
 
export function RefundConfirmation() {
  return (
    <ConfirmationCard
      id="refund-1007"
      title="Refund order 1007?"
      description="The host app will run the refund after confirmation."
      variant="warning"
      details={["Amount: EGP 420", "Reason: duplicate charge"]}
    />
  )
}

Tool#

The AI SDK tool name is request_confirmation.

Confirmation UI is not authorization. Host APIs must still enforce authentication, permissions, validation, and idempotency.

The component only captures an explicit user decision. The host decides whether the requested action is allowed and how it is executed.

Add confirmation callbacks#

The tool renderer maps handlers.onConfirm and handlers.onCancel to the card. Pass them from the host chat layer, where the app can use the confirmation id to call its own protected endpoint:

Copyimport type { ToolPartLike, ToolRenderHandlers } from "@/lib/fable-ui/core"
import { FableToolPart } from "@/lib/fable-ui/core/tool-renderer"
import { requestConfirmation } from "@/lib/fable-ui/tools/request-confirmation-tool"
 
const registry = { request_confirmation: requestConfirmation }
 
export function ConfirmationToolPart({
  part,
  onConfirm,
  onCancel,
}: {
  part: ToolPartLike
  onConfirm?: ToolRenderHandlers["onConfirm"]
  onCancel?: ToolRenderHandlers["onCancel"]
}) {
  return (
    <FableToolPart
      part={part}
      registry={registry}
      handlers={{ onConfirm, onCancel }}
    />
  )
}

Both callbacks receive { id, label }. Re-authorize and validate the action on the server, make it idempotent, and do not treat the rendered confirmation as permission to execute it.

States#

The preview shows ready, loading, empty, error, and disabled states. The disabled state is useful when the host app is still checking permissions or when a previous decision is being processed.

Manifest#

The manifest tells the model to use request_confirmation before host side effects, not as proof of authorization. Read the Manifests guide for the shared format.

---
tool: request_confirmation
type: registry:component
---

# request_confirmation

Use before writes, deletes, charges, sends, status changes, or destructive operations.

The confirmation card is not authorization. Host APIs must still enforce authentication, permissions, validation, and idempotency.