shadcn.io is not affiliated with official shadcn/ui
Persona Prompt AI Block for Vue
Four persona cards (Scholar, Maker, Brief, Coach) beside the same question, What is a mutex, answered in the chosen voice, with a composer and a request preview that adds the persona's system prompt.
Installation
Overview
Let people hear the difference between voices before they choose one, with this persona picker for Vue with Ark UI. Four cards at the start, Scholar, Maker, Brief and Coach, are a radio group: each has an icon, two trait Badges and its system prompt in three lines. At the end, "Same question, in this voice" shows one question, "What is a mutex?", with that persona's typed answer; the four answers share one cell, so the figure keeps its height whichever voice is picked. Under them a Textarea takes the persona's placeholder, and the request preview names the persona, prices its system prompt in estimated tokens and quotes the prompt. The Shine Button sends, the only colored control. It's built from Badge, Textarea, Button, Shine Button and Guides, with a CSS entrance only. For writing tools, tutors and any assistant with more than one voice.
FAQ
Is anything written by a model?
No. The four answers are typed for this demo and the figure says so. Picking a card changes the answer, the placeholder and the request preview; Send builds the request line and says "Request ready. Nothing was sent: this demo has no model." To make it real, send the persona's system prompt with the prompt and show the model's reply in the figure's place.
How do I add a persona?
Add an entry to PERSONAS with a name, two traits, the system prompt, the placeholder and the sample answer, and an icon in PersonaIcon. The cards, the answer cell, the preview and the token cost are all read from that array.
Where does the token cost come from?
It is the system prompt's length divided by four, rounded up, which is a rough rule and not a tokenizer. The preview adds it to the prompt's estimate for the total.
How does it work from the keyboard?
The cards are native radio buttons in one group, so the arrow keys move between them and Tab leaves the group. Enter in the field sends and Shift+Enter breaks the line. The answer that is not showing is hidden from the keyboard and from screen readers.