Confirmation
An alert-based component for managing tool execution approval workflows with request, accept, and reject states.
This tool wants to delete the file
/tmp/example.txt . Do you approve this action? Installation
If you prefer using jsrepo, please install via the command below:
Usage
Examples
Approval Request State
This tool wants to execute a query on the production database:
SELECT * FROM users WHERE role = 'admin' Approved State
You approved this tool execution
Rejected State
You rejected this tool execution
With AI SDK
Features
- State-based rendering for different approval stages
- Built on shadcn-svelte Alert component for consistent styling
- Flexible action buttons with customizable variants
- Context-based component composition
- TypeScript support with proper type definitions
- Accessible with proper ARIA attributes
- Seamless integration with Vercel AI SDK
- Responsive design with mobile support
Component API
Confirmation
| Prop | Type | Default | Description |
|---|---|---|---|
approval | ToolUIPartApproval | - | Approval object containing id, approved status, and optional reason |
state | ToolUIPartState | - | Current state: 'approval-requested' | 'approval-responded' | 'output-denied' | 'output-available' |
class | string | - | Additional CSS classes to apply to the alert container |
children | Snippet | - | Child components (ConfirmationTitle, ConfirmationRequest, etc.) |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ConfirmationTitle
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the title |
children | Snippet | - | Title content |
ConfirmationRequest
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Content to show when approval is requested (typically ConfirmationActions) |
ConfirmationAccepted
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Content to show when action is approved |
ConfirmationRejected
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Content to show when action is rejected |
ConfirmationActions
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the actions container |
children | Snippet | - | Action buttons (ConfirmationAction components) |
ConfirmationAction
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'default' | Button variant style |
size | 'default' | 'sm' | 'lg' | 'icon' | 'sm' | Button size |
class | string | - | Additional CSS classes to apply to the button |
children | Snippet | - | Button content |
onclick | (e: MouseEvent) => void | - | Click handler function |
...restProps | HTMLButtonAttributes | - | All other button props are supported |