Prompt variablesPro

`{{variable}}` highlighting in a prompt template, a test value per variable, warnings for missing values and a preview of the filled prompt.

Markdown

On this page

ProA returns prompt with two test values still empty, named under the template.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/prompt-variables

Usage

tsx

import { PromptVariables } from "@/components/ui/chatcn/pro/prompt-variables"

<PromptVariables
  value={template}
  onValueChange={setTemplate}
  values={testValues}
  onValuesChange={setTestValues}
/>

Variables are parsed with the free chatcn-prompt-template rules: {{name}}, {{ name }} and {{name:default}}. A variable with a default never counts as missing. Values for variables the template no longer uses are set aside under Not in the template, with a remove button, instead of silently piling up.

Click a variable's chip to select its first use in the template. Preview shows the prompt exactly as the model gets it, with filled values tinted.

Examples

States

ProEmpty, every value set in preview and read only.

Props

Prop	Type	Notes
`value`, `defaultValue`	`string`	The template
`values`, `defaultValues`	`Record<string, string>`	Test values by name
`variables`	`Record<string, { description?, example?, multiline? }>`	Optional details
`view`, `defaultView`	`"edit" \| "preview"`	Default `edit`
`countTokens`	`(text) => number`	Default: about four characters per token
`readOnly`	`boolean`	Locks the template; values stay editable
`labels`	`Partial<PromptVariablesLabels>`	Every string, for translation

Accessibility

The template is a native textarea over a highlighted copy, so caret, selection, undo, spellcheck and IME work as usual.
The missing summary is a polite live region linked to the template; missing fields are marked invalid.

Motion

None. Highlighting follows every keystroke without transitions, and switching Edit and Preview is instant.