shadcn.io is not affiliated with official shadcn/ui
Prompt Input AI Block for Vue
A prompt box with a growing field, files to attach from a typed list, a model menu, temperature and mode settings, and a live preview of the request a model would receive.
Installation
Overview
Give people a full prompt box for an assistant, with this AI prompt input for Vue with Ark UI. A compact header names the product, and a hairline frame with a plus mark on each corner holds the box. A Textarea that grows with what you type starts with a sample question; under it an Attach Popover offers three typed files that become chips with a remove button, and a Select picks the model and prints its window ("Orvane 2 Fast, 128K"). A Settings row opens a Collapsible with a temperature Slider and two Switches, Deep research and Agent mode, and the Shine Button sends, the only colored control. The band under it is the request preview: the model, the attachments, the temperature, the mode, the estimated tokens against the window and the prompt itself, rewritten live by every control above. Enter sends and Shift+Enter breaks the line. It's built from Textarea, Popover, Select, Collapsible, Slider, Switch, Button, Shine Button and Guides, with a CSS entrance only. For chat apps, developer tools and any assistant that takes more than text.
FAQ
What stays local, and what happens when I press Send?
Everything. Send builds the request the preview shows and says "Request ready. Nothing was sent: this demo has no model." in a polite status line; no network call is made and nothing answers. Models, windows and the token sizes of the sample files are typed example figures, and the token count is the prompt's length divided by four, which is a rough rule and not a tokenizer. To make it real, send the preview's fields (prompt, model id, attachments, temperature, mode) to your API in the submit handler and show the reply or the error where the status line is.
How do I use my own models and files?
Edit MODELS (a label, a value, the window in tokens and as text) and SAMPLES (a name, a size and the tokens each file would add) at the top of the file. The model menu, the preview and the token total are all worked out from those, so nothing is typed twice. Replace the sample list in the Attach popover with your own file picker and put the picked files into the same list.
Why are the settings behind a row?
The prompt and the model are what most people change, so they stay in view; temperature and the two modes are for the few who tune them. The Settings row says what is set ("Temperature 0.7, Standard") even when it is closed, so nothing is hidden from the preview. The row opens in place and pushes the preview down, which is a choice you make, not a jump while you type.
How does it work from the keyboard?
Enter sends and Shift+Enter breaks the line, and a hint tied to the field says so for a screen reader. Everything else is a button, a menu or a slider: the Attach button opens a list of toggle buttons, each marked pressed when its file is attached, and every chip has a remove button named for its file. The temperature slider is named and reads its value ("0.7") aloud, and the two switches are named.