Approval gate — Björk UI

Components•Approval gate

Approval gate

A human-in-the-loop check before a tool runs: the action, its target, a risk level with a reason, the arguments and side effects. High-risk calls ask you to hold Approve, and an optional countdown denies on its own.

Dependencies

Motion clsx tailwind-merge

Copy below cli

npx shadcn add @bjork-ui/approval-gate

How to use

import { ApprovalGate, SAMPLE_APPROVAL_REQUESTS } from "@/components/bjork-ui/ai/approval-gate";export function Demo() {  return (    <ApprovalGate      request={SAMPLE_APPROVAL_REQUESTS[0]}      requireHold      timeoutMs={30_000}      onDecision={(d) => console.log(d.status, d.reason, d.alwaysAllow)}    />  );}

Approval neededAuto-deny High risk

Send email to 214 customers

send_bulk_email→ segment · churn-risk-q3

High risk. Irreversible. Sent emails cannot be recalled.

from: ada@fieldnotes.dev
subject: A note about your Studio plan
body: Hi {{first_name}}, we noticed you haven't opened Fieldnotes in a while. We've moved your workspace to the new editor and kept every draft exactly where you left it. If anything feels off, reply to this email and a person will answer.
track_opens: true

Will email 214 recipients from ada@fieldnotes.dev
Will log a campaign in Halcyon CRM

Reason (optional, sent to the assistant)

Always allow send_bulk_email this session

High risk asks you to hold Approve. Hover the card to pause the countdown.

Options

Risk

30s timeout