import { ApprovalCard } from "@/components/tool-ui/approval-card";

export function Example() {
  return (
    <ApprovalCard
      id="approval-card-example"
      title="Deploy to Production?"
      description="This will push the latest changes to all users."
      icon="rocket"
      confirmLabel="Deploy"
      onConfirm={() => console.log("Approved")}
      onCancel={() => console.log("Denied")}
    />
  );
}

<ApprovalCard
  id="destructive-example"
  title="Delete Project?"
  description="This action cannot be undone."
  icon="trash-2"
  variant="destructive"
  confirmLabel="Delete"
  cancelLabel="Keep"
  onConfirm={() => deleteProject()}
  onCancel={() => console.log("Kept")}
/>

pnpm dlx shadcn@latest add button

"use client";

import { makeAssistantTool } from "@assistant-ui/react";
import {
  ApprovalCard,
  ApprovalCardErrorBoundary,
  parseSerializableApprovalCard,
  SerializableApprovalCardSchema,
  type SerializableApprovalCard,
  type ApprovalDecision,
} from "@/components/tool-ui/approval-card";

export const ApprovalTool = makeAssistantTool<
  SerializableApprovalCard,
  ApprovalDecision
>({
  toolName: "requestApproval",
  description: "Request user approval before performing an action.",
  parameters: SerializableApprovalCardSchema,
  render: ({ args, result, addResult, toolCallId }) => {
    if (!(args as any)?.title) return null;

    const approvalCard = parseSerializableApprovalCard({
      ...args,
      id: (args as any)?.id ?? `approval-${toolCallId}`,
    });

    return (
      <ApprovalCardErrorBoundary>
        {result !== undefined ? (
          <ApprovalCard {...approvalCard} choice={result} />
        ) : (
          <ApprovalCard
            {...approvalCard}
            onConfirm={() => addResult("approved")}
            onCancel={() => addResult("denied")}
          />
        )}
      </ApprovalCardErrorBoundary>
    );
  },
});