Permission Grant

AI chats 9

About

A capability-level consent surface that explains reach and duration before access is granted.

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

Code

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

Usage.tsx

import PermissionGrant from '@/components/ui/permission-grant'

export default function Demo() {
  return (
    <PermissionGrant
      capability="repository write access"
      className="w-full max-w-lg"
      description="The coding agent needs permission to edit the files required for this task."
      duration="Until this task ends"
      restrictions={['Access anything outside this repository']}
      scope={[
        <>
          Read and edit files in <code>src/components</code>
        </>,
        <>
          Run <code>pnpm</code> validation commands
        </>,
      ]}
    />
  )
}