Permission Request

An agent asking before it acts: what it wants to do, how risky it is, what will change, and buttons to apply, always allow or deny.

Edit app/dashboard/page.tsx

low risk

Replace the sequential awaits with one Promise.all.

+1 lines added,−2 lines removed

const user = await getUser(session)
Removed: const projects = await getProjects(user.id)
Removed: const billing = await getBilling(user.id)
Added: const [projects, billing] = await Promise.all([getProjects(user.id), getBilling(user.id)])

pnpm dlx shadcn@latest add @latheui/permission-request

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Permission Request is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

Also accepts native section attributes.

Prop	Type	Default	Description
title* (required)	ReactNode	—	What the agent wants to do.
description	ReactNode	—	Why, in a sentence.
risk	"low" \| "medium" \| "high"	—	Shown as a badge: grey, amber or red.
icon	ReactNode	—	The action's icon. A shield when left out.
children	ReactNode	—	What will change, such as a Diff View or a command.
onApprove* (required)	() => void	—	Called by Apply, or Enter.
onAlwaysAllow	() => void	—	Shows an Always allow button.
onDeny* (required)	() => void	—	Called by Deny, or Escape.
approveLabel	string	"Apply"	Text of the approve button.
denyLabel	string	"Deny"	Text of the deny button.
decision	"pending" \| "approved" \| "always" \| "denied"	—	Show a decision made elsewhere in place of the buttons.
shortcuts	boolean	true	Enter approves and Escape denies while focus is in the card.

The card is a section headed by what the agent wants to do, so it can be found and read on its own.
The risk is written as words (“low risk”), not only colored.
The shortcut hints are hidden from screen readers; the buttons keep plain names.
Once decided, the outcome replaces the buttons and is announced as a status.

The buttons fade into the outcome, which rises 4px into place. Reduced motion keeps only the fade.

<PermissionRequest
  title="Send 1,240 emails"
  risk="medium"
  approveLabel="Send"
  denyLabel="Not now"
  onApprove={send}
  onDeny={cancel}
/>

API reference

Also accepts native section attributes.

Prop	Type	Default	Description
title* (required)	ReactNode	—	What the agent wants to do.
description	ReactNode	—	Why, in a sentence.
risk	"low" \| "medium" \| "high"	—	Shown as a badge: grey, amber or red.
icon	ReactNode	—	The action's icon. A shield when left out.
children	ReactNode	—	What will change, such as a Diff View or a command.
onApprove* (required)	() => void	—	Called by Apply, or Enter.
onAlwaysAllow	() => void	—	Shows an Always allow button.
onDeny* (required)	() => void	—	Called by Deny, or Escape.
approveLabel	string	"Apply"	Text of the approve button.
denyLabel	string	"Deny"	Text of the deny button.
decision	"pending" \| "approved" \| "always" \| "denied"	—	Show a decision made elsewhere in place of the buttons.
shortcuts	boolean	true	Enter approves and Escape denies while focus is in the card.

Accessibility

The card is a section headed by what the agent wants to do, so it can be found and read on its own.
The risk is written as words (“low risk”), not only colored.
The shortcut hints are hidden from screen readers; the buttons keep plain names.
Once decided, the outcome replaces the buttons and is announced as a status.