# Prompt Editor Variables

Support prompt library where each template declares tone, plan and account data and is previewed against real customers.

- id: `prompt-editor-variables`
- Page: https://agentic-ui-kit.com/components/prompt-editor-variables
- Live preview: https://agentic-ui-kit.com/live/component/prompt-editor-variables

## Install

```bash
agentic-ui add prompt-editor-variables
npx shadcn@4.17.0 add @agentic-ui/prompt-editor-variables
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** template-authoring, typed-variables, placeholder-highlighting, auto-declaration, type-validation, live-preview, data-set-switching, keyboard-navigation, copy-rendered-output, read-only-template
- **Intents:** create-edit, generate-content, configure, evaluate-ai
- **Suits domains:** ai-workspace, ai-agents, ai-content, devtools, saas
- **Interaction:** edit-template, insert-variable, declare-variable-type, fill-variable-values, switch-data-set, toggle-preview, copy-output, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Support prompt library where each template declares tone, plan and account data and is previewed against real customers, Developer console for versioning system prompts with typed variables and validation before publishing them, Content generator with templates parameterized by audience, length and publication date, Evaluation panel where the same prompt is rendered against several data sets before launching the run
- **Avoid when:** Fixed prompts with no parameters, where a simple textarea is enough, Editing long documents or free-form rich text, Templates with control logic (conditionals or loops) that require a full template engine
- **Preserve when adapting:** placeholder-syntax, type-validation-contract, preview-round-trip, keyboard-contract
- **Replace when adapting:** domain-copy, variable-declarations, data-sets, submit-action
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, input, textarea, label
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives