shadcn.io is not affiliated with official shadcn/ui
Multimodal Prompt AI Block for Vue
A prompt box with a kind bar for images, audio, documents and links, each with its own limit, typed samples and real local file checks, and a preview that groups attachments by kind.
Installation
Overview
Let people add more than text to a request, with this multimodal prompt for Vue with Ark UI. A Toggle Group kind bar chooses Image, Audio, Document or Link, each with a count, and a line under it gives that kind's limit ("Up to 4 images, 5 MB each") and what it is for. A Textarea holds the question. Under it, a File Upload drop zone takes real files for the three file kinds, and a button adds a typed sample such as sketch-01.png, standup.m4a or brief.pdf; a file of the wrong kind or over its size is refused with a problem line ("Audio only: standup.txt is text"). The Link kind takes an address and keeps only its host, "not fetched". Every attachment is a chip with a glyph tile and a remove button, and the request preview groups them by kind with "2 of 4" counts next to the prompt. The Shine Button sends, the only colored control. It's built from Toggle Group, Textarea, File Upload, Input, Button, Shine Button and Guides, with a CSS entrance only. For design review, support and any assistant that looks and listens.
FAQ
What happens to a file I drop, and what stays local?
Nothing is uploaded. The browser tells the page the file's name, size and type, the block checks them against the kind's limits, and the chip shows the name and size; the contents are never read, stored or sent, and Send only builds the request. Wire your own storage in the accept handler (it is marked) and put the returned id in the chip. Links keep only their host and are never fetched.
How do I change a kind's limits?
Edit KINDS at the top of the file: for each kind its label, its line of copy, how many it takes (max), the largest file in bytes (maxBytes) and which types the drop zone accepts. The counts in the bar, the limit line, the refusals and the preview all follow it. SAMPLES lists the typed files the sample button adds.
How are refusals worded?
By kind and by what was dropped: "Images only: notes.txt is text", "Up to 4 images: remove one to add another", "photo.png is 8.2 MB; images take up to 5 MB". They appear in one line under the drop zone with an alert icon, in the page's colors, and the line is announced when it appears.
Can I do all of it from the keyboard?
Yes. The kind bar is a group of toggle buttons you move through with the arrow keys; the drop zone has a Browse button and a sample button; the link has its own field where Enter adds it; and every chip has a remove button named for its file. Dragging is only an extra way in. The part of the add area that does not belong to the chosen kind is hidden and skipped by Tab.