2
Playground

ConfirmationCard Beta

PreviousNext

Ask for explicit confirmation before host side effects.

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

Refund order 1007?
The host app will run the refund after confirmation.
warning
  • Amount: EGP 420
  • Reason: duplicate charge
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 shobky/fable-ui/confirmation-card

Installed files include:

components/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

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"]}
    />
  )
}

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.

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.

lib/fable-ui/manifests/request-confirmation.md
---
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.