Skip to main content
Some actions shouldn’t execute immediately. Deleting data, sending emails, or making purchases should require explicit user confirmation.

​
Marking Actions as Requiring Approval

Set approvalRequired: true on any action: 
{
    name: "deleteProject",
    description: "Permanently delete a project and all its data",
    options: {
        projectId: {
            type: "string",
            description: "The project ID to delete",
            required: true,
        },
    },
    approvalRequired: true,
}

​
What Happens

1

User makes request

“Delete the Marketing project”
2

Assistant identifies action

Determines it should call deleteProject
3

Confirmation shown

Instead of executing, shows a confirmation dialog
4

User decides

Clicks Approve or Deny
5

Action executes (if approved)

Only runs after explicit confirmation

​
Built-in UI

ModifyWithAI includes confirmation components: 
import {
    Confirmation,
    ConfirmationTitle,
    ConfirmationRequest,
    ConfirmationActions,
    ConfirmationAction,
} from "modifywithai"
These render automatically when the assistant returns a tool call with approvalRequired: true.

​
When to Require Approval

Deleting Data

deleteProject, removeUser, clearHistory

Sending Communications

sendEmail, postMessage, publishArticle

Financial Actions

processPayment, refund, subscribe

Permission Changes

changeRole, revokeAccess, shareDocument

​
Handling Approval Responses

The addToolApprovalResponse function from useAssistant lets you programmatically respond to approval requests: 
const assistant = useAssistant({...})

// Approve
assistant.addToolApprovalResponse(toolCallId, true)

// Deny
assistant.addToolApprovalResponse(toolCallId, false)

​
Custom Confirmation UI

You can build your own confirmation UI using the approval response function: 
function CustomConfirmation({ toolCall, onRespond }) {
    return (
        <div className="confirmation-dialog">
            <h3>Confirm Action</h3>
            <p>
                Do you want to {toolCall.name} with{" "}
                {JSON.stringify(toolCall.options)}?
            </p>
            <button onClick={() => onRespond(true)}>
                Yes, proceed
            </button>
            <button onClick={() => onRespond(false)}>
                Cancel
            </button>
        </div>
    )
}

​
Next Steps

Components

Explore the built-in UI components

useAssistant

Full hook reference