Skip to main content
Display approval dialogs for actions that require user confirmation.

​
When Shown

Confirmation UI appears when:
  1. An action has approvalRequired: true
  2. The assistant attempts to execute that action
  3. The user hasn’t yet approved or denied

​
Confirmation

Container for the approval dialog: 
import {
    Confirmation,
    ConfirmationTitle,
    ConfirmationRequest,
    ConfirmationActions,
    ConfirmationAction,
} from "modifywithai"

<Confirmation>
    <ConfirmationTitle>Confirm Action</ConfirmationTitle>
    <ConfirmationRequest>
        Delete project "Marketing Q1"?
    </ConfirmationRequest>
    <ConfirmationActions>
        <ConfirmationAction onClick={() => approve()}>
            Approve
        </ConfirmationAction>
        <ConfirmationAction onClick={() => deny()} variant="secondary">
            Deny
        </ConfirmationAction>
    </ConfirmationActions>
</Confirmation>

​
ConfirmationTitle

Heading for the dialog: 
<ConfirmationTitle>Confirm Deletion</ConfirmationTitle>

​
ConfirmationRequest

Description of what will happen: 
<ConfirmationRequest>
    This will permanently delete the project and all associated data.
</ConfirmationRequest>

​
ConfirmationActions

Container for action buttons: 
<ConfirmationActions>
    {/* Buttons here */}
</ConfirmationActions>

​
ConfirmationAction

Individual action button: 
<ConfirmationAction onClick={handleApprove} variant="default">
    Approve
</ConfirmationAction>

<ConfirmationAction onClick={handleDeny} variant="secondary">
    Deny
</ConfirmationAction>

​
Props

PropTypeDescription
onClick() => voidClick handler
variant"default" | "secondary" | "destructive"Button style

​
ConfirmationAccepted

Display after approval: 
import { ConfirmationAccepted } from "modifywithai"

<ConfirmationAccepted>
    Action approved
</ConfirmationAccepted>

​
ConfirmationRejected

Display after denial: 
import { ConfirmationRejected } from "modifywithai"

<ConfirmationRejected>
    Action denied
</ConfirmationRejected>

​
Using with useAssistant

The hook provides addToolApprovalResponse to respond programmatically: 
const assistant = useAssistant({...})

function handleApprove(toolCallId: string) {
    assistant.addToolApprovalResponse(toolCallId, true)
}

function handleDeny(toolCallId: string) {
    assistant.addToolApprovalResponse(toolCallId, false)
}

​
Complete Example

import {
    Confirmation,
    ConfirmationTitle,
    ConfirmationRequest,
    ConfirmationActions,
    ConfirmationAction,
} from "modifywithai"

function ApprovalDialog({ toolCall, assistant }) {
    const actionDef = availableActions.find(a => a.name === toolCall.name)

    return (
        <Confirmation>
            <ConfirmationTitle>
                Confirm: {actionDef?.description || toolCall.name}
            </ConfirmationTitle>
            <ConfirmationRequest>
                <pre>{JSON.stringify(toolCall.options, null, 2)}</pre>
            </ConfirmationRequest>
            <ConfirmationActions>
                <ConfirmationAction
                    onClick={() => assistant.addToolApprovalResponse(toolCall.id, true)}
                >
                    Approve
                </ConfirmationAction>
                <ConfirmationAction
                    onClick={() => assistant.addToolApprovalResponse(toolCall.id, false)}
                    variant="secondary"
                >
                    Deny
                </ConfirmationAction>
            </ConfirmationActions>
        </Confirmation>
    )
}