AI Elements
Confirmation
Asks for approval before a tool runs.
Confirmation asks the person for a yes or no before a tool runs. The question is an Item with Deny and Approve buttons. Once the person answers, the call becomes a Tool line.
Installation
Confirmation is built with the Item and Button components.
Usage
<template>
<UiItem variant="outline" size="sm">
<UiItemMedia variant="icon">
<UiIcon name="lucide:terminal" />
</UiItemMedia>
<UiItemContent>
<UiItemTitle>Run {{ part.input.command }}?</UiItemTitle>
<UiItemDescription>The command runs in this project.</UiItemDescription>
</UiItemContent>
<UiItemActions>
<UiButton size="sm" variant="outline" @click="deny"> Deny </UiButton>
<UiButton size="sm" @click="approve"> Approve </UiButton>
</UiItemActions>
</UiItem>
</template>
AI SDK
While the part is approval-requested, answer with the approval id. Pass sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses so the chat continues once every approval has an answer.
chat.addToolApprovalResponse({
id: part.approval.id,
approved: true,
});
import { Chat } from "@ai-sdk/vue";
import { lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
const chat = new Chat({
sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
});
Approve streams the tool output. Deny streams output-denied. Either way, the part becomes a Tool line.
See Tool.