Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

System Role Prompt AI Block for React Aria

An instruction editor with a role select, a live token count against a 500-token budget, a Role, Tone, Format and Limits coverage checklist, a temperature slider and one typed sample reply.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Help people write the instruction an assistant starts with, with this system-role editor for React with React Aria. A Select picks a role, Support agent, Code reviewer, Plain-language editor or Tutor, and fills an editable Textarea with its instruction; a count reads "about 62 of 500 tokens" with a Progress bar under it. A checklist ticks Role, Tone, Format and Limits by matching words in the text, each with a glyph and a word, never a score. A temperature Slider runs from more predictable to more varied. At the end one typed question shows the preset's typed reply, and once you edit the text the note says the sample reply is still the preset's. The Shine Button, "Use this role", says "Role set, in this demo". For assistant builders, support tools and any app with editable instructions.

FAQ

What is real and what is typed?

The token count and the coverage check are computed from your text in the browser. The four preset instructions, the questions and the sample replies are typed for this demo, and the reply does not change when you edit the text; the note says so. "Use this role" sends nothing. To make it real, save the instruction with your assistant's settings and run the question through your model.

How does the coverage check work?

It looks for words in the text: "you are" or "act as" for Role, words like polite, calm or plain for Tone, words like bullet, list or short for Format, and words like never, do not or at most for Limits. It is a keyword match, not a judgement of quality, which is why each line says Covered or Not found and nothing more. Edit the patterns in ASPECTS to suit your house style.

How is the budget counted?

The text's length divided by four, rounded up, against 500 tokens. Past the budget the bar stays full and a line says by how much; nothing is cut. It is a rough rule, not a tokenizer.

How does it work from the keyboard?

The role is a select, the instruction a labelled textarea, the temperature a named slider that reads its value, and Reset and Use this role are buttons. Reset is always there and answers "Back to the preset" or stays inert until the text has been edited.

Does it work in a right-to-left language?

Yes. The instruction, the question and the reply follow their own direction, the counts keep their order, and the checklist and the slider sit on the logical sides. Note that the coverage check matches English words.

How does it look on a phone?

The editor comes first and the sample answer, the checklist and the slider follow under it. The reply cell keeps its height when you change role.

All 100 ai blocks