shadcn.io is not affiliated with official shadcn/ui
Tool Approval AI Block for Vue
A tool call waiting for a yes: the risk in words, a pattern field whose wildcard re-works which of twelve branches would be deleted, a scope choice, and Deny or a destructive Approve.
Installation
Overview
Let a person decide before an agent acts, with this tool approval for Vue with Ark UI. A hairline frame with a plus mark on each corner says the assistant wants to run delete_branches, rates the risk in a glyph and words ("High: deletes data"), and lists the call's parameters. The pattern is an Input with release/*-old in it, and under it all twelve branch names stay listed: the ones the pattern reaches are worked out here, by a * wildcard, on every keystroke, and each row says "Deleted" or "Kept" while the heading counts them. Two radio rows choose Allow once or Allow for this session. Deny is an outline Button and Approve is the destructive Button ("Approve and delete 4"); this block has no Shine Button, because the only action is a destructive one. A pattern that matches nothing, or more than ten branches, disables Approve and says why. After a decision the matched names are struck through and "Review again" puts the request back. For agent permission gates, tool sandboxes and any product that asks before it acts.
FAQ
What stays in the page, and how do I make it real?
Everything. The twelve branch names are typed, the wildcard match is worked out in the page, and Approve changes only what the block shows: nothing is deleted and nothing is sent. To wire it for real, send the approved pattern and scope to your tool runner from approve, return its result, and keep the check against the limit on the server as well.
How does the pattern match?
A * stands for any run of characters, including slashes, and everything else must match exactly, so release/*-old reaches the four old release branches and * reaches all twelve. The match runs on every keystroke and the list, the count and the Approve label follow it.
Why is Approve disabled for some patterns?
A pattern that reaches nothing has nothing to delete, and one that reaches more than ten is too wide to approve in one step. Approve stays focusable and answers with the reason in the problem line and in the status, so it is never a silent dead end.
Why is Approve not the colored Shine Button?
The catalog's destructive Button is the right button for an action that deletes. It reads clearly in both themes, and the block keeps a single decisive control instead of two competing ones.