Permission prompt

Preview

Install

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/permission-prompt

Brings in: button, locale, payload, utils · npm: lucide-react@^1.67.0

Usage

"use client"

import * as React from "react"
import { PermissionPrompt, type PermissionRequest } from "@/components/permission-prompt"

const command: PermissionRequest = {
  id: "p1",
  tool: "Bash",
  title: "The agent wants to run npm test -- invoices",
  reason: "No rule allows Bash commands yet.",
  input: { command: "npm test -- invoices", timeout: 120000 },
}

const question: PermissionRequest = {
  id: "p2",
  tool: "AskUserQuestion",
  input: {},
  questions: [
    {
      id: "Which test runner should the new tests use?",
      prompt: "Which test runner should the new tests use?",
      tag: "Runner",
      multiple: false,
      other: true,
      options: [
        { id: "Vitest", label: "Vitest", detail: "Already used by the web app" },
        { id: "Jest", label: "Jest", detail: "Used by the older packages" },
      ],
    },
  ],
}

export default function Example() {
  const [said, setSaid] = React.useState<string>()
  return (
    <div className="flex max-w-lg flex-col gap-6">
      <PermissionPrompt
        request={command}
        mode="default"
        editable
        suggestions={[{ action: "allow", what: "Bash(npm test:*)", scope: "local" }]}
        onAllow={(a) => setSaid(`Allowed${a.updatedInput ? " as edited" : ""}${a.alwaysAllow?.length ? ", and won’t ask again" : ""}.`)}
        onDeny={() => setSaid("Denied.")}
      />
      <PermissionPrompt request={question} onAllow={(a) => setSaid(`Answered: ${a.answers?.map((x) => [...(x.choice ?? []), x.text].filter(Boolean).join(", ")).join("; ")}`)} onDeny={() => setSaid("Not answered.")} />
      <p role="status" className="text-sm text-muted-foreground">{said}</p>
    </div>
  )
}

<PermissionPrompt>

Strings

Types

PermissionSuggestion

One "don't ask again" choice, in the plain shape PermissionPrompt shows. claudeSuggestions builds them from the SDK's.

{ /** What the rule does. */ action: "allow" | "deny" | "ask" | "remove" | "mode" | "directories" | "other" /** What it covers, as the source writes it: `Bash(npm test:*)`, a mode's name, directories. Shown as code. */ what: string /** Where it's kept: "session", "local" (this project, this computer), "project" (shared), "user", or the source's own word. */ scope?: string | undefined }

PermissionQuestion

A question the agent asks through the prompt: pick one or more labels, or answer in its own words.

{ id: string prompt: string tag?: string | undefined options: { id: string; label: string; detail?: string | undefined }[] multiple: boolean other?: boolean | undefined }

PermissionRequest

A tool call waiting on a person, in the shape the adapters give (ClaudeApproval fits it).

{ id: string tool: string input: unknown /** The source's own sentence for the request: "Claude wants to run npm test". */ title?: string | undefined description?: string | undefined /** Why it reached a person (no rule allowed it, a safety check, a path outside the project). */ reason?: string | undefined blockedPath?: string | undefined /** Put the focus on Deny: the request grants more than it

PermissionAnswer

{ /** The input as edited, when the person changed it. */ updatedInput?: Record<string, unknown> | undefined /** The suggestions the person ticked, by index. */ alwaysAllow?: number[] | undefined /** Answers to `questions`. */ answers?: { questionId: string; choice?: string[] | undefined; text?: string | undefined }[] | undefined }