Tool Approval

Component 16

About

A human-in-the-loop permission card that shows an AI agent's requested tool call and lets a user allow once, always allow, or deny before it runs.

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

Code

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

Usage.tsx

"use client";

import ToolApproval from "@/components/ui/tool-approval";

export default function ToolApprovalDemo() {
  return (
    <div className="flex w-full max-w-lg items-center justify-center p-8">
      <ToolApproval
        tool='fs.write(path: "src/app/page.tsx")'
        description="This will overwrite the existing file with new content."
        parameters={[
          { id: "path", label: "path", value: "src/app/page.tsx" },
          { id: "bytes", label: "bytes", value: "1,204" },
        ]}
        status="pending"
        defaultOpen
        onApprove={() => {}}
        onAlwaysAllow={() => {}}
        onDeny={() => {}}
      />
    </div>
  );
}