ToolApprovalCard

Ask before a call starts, in one card: the sentence names the tool and the server it comes from, the arguments sit under it, and the three answers carry their keyboard shortcuts — Esc declines, Mod+Enter allows once, Shift+Mod+Enter allows from now on (shortcuts={false} leaves the keyboard alone). params takes the raw input of the call: nested objects unfold into Params limit-style lines, schema gives them the order and the titles of the tool, and a string is quoted only when it would read as a number or a flag. Pass ready lines instead when the host formats them itself. The card folds to the sentence and the buttons with defaultExpanded={false}, children adds anything under the arguments (the rule that caused the prompt, a warning), and decision marks the answer when the host owns it. Every word is in labels, including the sentence itself. Use ToolApprovalFooter where the call already has a card of its own and only the answer is missing.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
Request with arguments
Folded and answered
API reference
Prop
Type
Required
tool
ToolApprovalCardTarget
Yes
Tool the agent wants to call
server
ToolApprovalCardTarget
No
Server the tool belongs to, for example the MCP server
params
unknown
No
Arguments of the call: the input of the tool, or lines prepared by the host
schema
JsonSchema
No
Input schema of the tool: gives the order and the titles of the arguments
locale
string
No
Locale of numbers and dates, the locale of the runtime by default
children
React.ReactNode
No
Anything shown under the arguments, for example the rule that caused the prompt
defaultExpanded
boolean
No
Arguments are open at mount, `true` by default
expanded
boolean
No
Controlled state of the arguments
onExpandedChange
(expanded: boolean) => void
No
Called when the reader opens or closes the arguments
onDecline
() => void
No
Called when the call is refused
onAllowOnce
() => void
No
Called when the call is allowed this one time
onAlwaysAllow
() => void
No
Called when the call is allowed from now on; the button is left out without it
decision
ToolApprovalCardDecision | null
No
Decision made elsewhere: the buttons stop responding and the chosen one stays marked
disabled
boolean
No
Blocks the buttons while the host is busy with the answer
shortcuts
boolean
No
Esc refuses, Mod+Enter allows once and Shift+Mod+Enter allows always, `true` by default
labels
Partial<ToolApprovalCardLabels>
No
Overrides of the default English labels
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element