Confirmation
Human-in-the-loop approval for tool execution, on the kit's Alert.
Overview
Confirmation gates a tool call behind user approval. It reads the AI SDK
approval object (ToolUIPart.approval + .state) and renders only what the
current state narrates: the request copy with Approve / Reject actions while
approval is pending, then the accepted or rejected receipt once the user has
answered. Nothing renders before the tool resolves its input, so the alert only
appears when there is something to decide.
delete_file("/tmp/example.txt"). Do you approve this action?$ npx morpha-ui add confirmationUsage with the AI SDK
Mark the tool with requireApproval: true on the server, then wire the actions
to addToolApprovalResponse from useChat:
const { messages, addToolApprovalResponse } = useChat();
{message.parts.map((part, i) =>
part.type === "tool-delete_file" && part.approval ? (
<Confirmation key={i} approval={part.approval} state={part.state}>
<ConfirmationRequest>
This tool wants to delete <code>{part.input?.filePath}</code>. Do you
approve this action?
</ConfirmationRequest>
<ConfirmationAccepted>
<CheckIcon />
<span>You approved this tool execution.</span>
</ConfirmationAccepted>
<ConfirmationRejected>
<XIcon />
<span>You rejected this tool execution.</span>
</ConfirmationRejected>
<ConfirmationActions>
<ConfirmationAction
variant="outlined"
onClick={() =>
addToolApprovalResponse({ id: part.approval.id, approved: false })
}
>
Reject
</ConfirmationAction>
<ConfirmationAction
onClick={() =>
addToolApprovalResponse({ id: part.approval.id, approved: true })
}
>
Approve
</ConfirmationAction>
</ConfirmationActions>
</Confirmation>
) : null,
)}Installation
Distributed via the Morpha CLI: npx morpha-ui add confirmation. Ported from
AI Elements onto the kit's
Alert and
Button; depends on ai for the
ToolUIPart types.
npx morpha-ui add confirmationAPI Reference
Prop
Type