About
A chat UI card that asks the user to allow or deny an AI agent's tool call, with a hold-to-confirm step for destructive actions and a streaming output trace once approved.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Tool Approval to your project and fits it to your theme.
Code
How AI Tool Approval is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import AIToolApproval from "@/components/ui/ai-tool-approval";
export default function AIToolApprovalDemo() {
return (
<div className="flex w-full items-center justify-center p-10">
<AIToolApproval />
</div>
);
}
















