ViteHub is still experimental. Expect bugs and breaking changes.
Attachments
Validate browser files, preview them, and convert them to AI SDK FileUIParts.
Use useAgentAttachments() when the application needs validation or wants to keep raw File values until submission.
AgentChatPrompt accepts the resulting AI SDK file parts. This preview uses a dummy log attachment and does not upload data.
Preview
ChatPromptExample.vue
<script setup lang="ts">
import type { FileUIPart } from "ai";
import { ref } from "vue";
const input = ref("Check the failed invocation and explain the cause.");
const files = ref<FileUIPart[]>([
{
type: "file",
filename: "invocation.log",
mediaType: "text/plain",
url: "data:text/plain,Agent%20invocation%20failed",
},
]);
const submitted = ref("");
</script>
<template>
<div class="space-y-3">
<AgentChatPrompt
v-model="input"
v-model:files="files"
accept="text/plain"
placeholder="Ask the Agent…"
status="ready"
@submit="submitted = $event.text"
/>
<p v-if="submitted" class="text-xs text-muted">
Submitted: {{ submitted }}
</p>
</div>
</template>
const attachments = useAgentAttachments({
accept: "image/*,.pdf",
maxFiles: 5,
maxSize: 10 * 1024 * 1024,
onReject(file, reason) {
toast.add({ title: `${file.name}: ${reason}` });
},
});
async function submit(text: string) {
await sendMessage({
text,
files: await attachments.toFileParts(),
});
attachments.clear();
}
The composable exposes files, add(), remove(), clear(), inputProps, and toFileParts(). Image object URLs are revoked when items are removed or the owning Vue scope is disposed.
For hosted uploads, upload the raw files first and construct FileUIPart values with permanent URLs. Data URLs are convenient for supported model inputs but are not a persistence strategy.