Tool Approval

Component

About

Approval card that asks the user to allow or deny an AI agent tool call, showing the command and its scope.

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

import ToolApproval from '@/components/ui/tool-approval'

export default function Demo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">
      <ToolApproval
        className="w-full max-w-lg"
        command="pnpm build"
        description="Run the production build to validate the newly generated component routes."
        scope="This command only"
        tool="Terminal"
      />
    </div>
  )
}