Tool confirm card
Approval for any tool call: the call as a trace line, then a card with its parameters and deny or confirm.
Install
npx ondai add tool-confirm-cardUsage
import { ToolConfirmCard } from '@/components/ondai/tool-confirm-card'
const agent = useToolAgent({ tools, meta: { sendEmail: { policy: 'ask', risk: 'high' } } })
<ToolConfirmCard pending={agent.pendingConfirmation} presentation="card" />- Works with provider-executed tool loops (Apple, Nano) because approval happens inside the tool's execute.
Customize
Every AI component takes the same look and customization props, so it fits your app rather than ours.
<ToolConfirmCard
variant="pop"
tint="#FF5A5F"
size="lg"
radius={12}
icons={{ tool: Search, riskLow: null }}
labels={{ wantsToRun: '…', riskLow: '…' }}
/>| Prop | What it does |
|---|---|
variant | The look of the whole component: clean, minimal, glass, pop, candy, metal, shine |
size | sm, md, lg; type, rows, icons and keys scale together |
tint | Any colour; the variant paints its keys, tiles and glow in it |
radius | Corner radius of the container |
icons | Replace any icon (a lucide component, an element, or null to hide it): tool, riskLow, riskMedium, riskHigh, edit, editDone, deny, confirm, done, error, denied |
labels | Every visible and spoken string; defaults are exported as toolConfirmCardLabels: wantsToRun, riskLow, riskMedium, riskHigh, edit, editDone, deny, confirm, failed, skipped, denied |
| Slots | Draw a part yourself: renderField, renderActions, renderStatus, renderEmpty |
styles | Style any named part |
Variants
| Prop | Options |
|---|---|
variant | clean, minimal, glass, pop, candy, metal, shine |
presentation | card, sheet, banner, inline |
size | sm, md, lg |
Fallback
When no provider is ready the component renders the unavailable state (AvailabilityGate copy) and, where a deterministic path exists, keeps working without the model.
Eval score
No model-driven fixtures for this component.
Files
Registry dependencies: button, sheet, shimmer-text, surface
npm dependencies: @ondai/core, @ondai/tokens, lucide-react-native, react-native-reanimated
Photo caption
A photo in; a caption and accessibility alt text out, written by the on-device vision model. Streamed, editable, copyable, and handed back as alt text.
Voice input
Push-to-talk that transcribes on device: the mic is the variant's key, a waveform drawn in the variant, then the transcript with Use and Retry.