AI Approval

AI chats 38

About

Human-in-the-loop approval card where the chosen option expands to fill the card while the alternatives collapse away. Respects prefers-reduced-motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Approval to your project and fits it to your theme.

Code

How AI Approval is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import Component from "@/components/ui/ai-approval";

export default function DemoOne() {
  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-lg space-y-4">
        <Component
          options={[
            { id: "approve", label: "Run it", detail: "Applies all 3 changes" },
            { id: "dry", label: "Dry run first", detail: "Prints the plan only" },
            { id: "cancel", label: "Cancel", destructive: true },
          ]}
          question="Apply the migration to production?"
        >
          <p>
            3 tables altered, 1 column dropped. This cannot be rolled back
            automatically.
          </p>
        </Component>

        <Component
          options={[
            { id: "yes", label: "Send" },
            { id: "no", label: "Discard" },
          ]}
          question="Send the drafted reply to the customer?"
          resolvedId="yes"
        />
      </div>
    </div>
  );
}