Prompt Variables

A prompt template with its slots filled in, beside the exact text the model receives. Variables are parsed out of the template rather than declared separately, so they cannot drift out of sync with it.

src/components/ui/prompt-variables.tsx

About

From the component's own source, where it was written.

A prompt template with its slots filled in, side by side with the result.

Prompt templates fail in one specific way: a variable is renamed in the text and not in the caller, so {{customer}} ships to the model as the literal string {{customer}}. Nothing throws, the model improvises, and the bug is found in an eval three days later.

So the variables are **parsed out of the template** rather than declared separately — they cannot drift, because there is only one list. Anything still unfilled is highlighted in the preview instead of being silently interpolated as an empty string.

The preview is the exact text that will be sent, which is the point. A template view that renders the slots as chips is prettier and answers a different question than "what does the model actually receive".

Install

npx astralyx-ui add prompt-variables

Usage

import { PromptVariables } from '@/components/ui/prompt-variables'

<PromptVariables template={template} values={values} onChange={setValues} />

Composer

Change the props and the source below follows.

Variables

1 unfilled

product

customer

plan

Drives which refund rules apply.

question

What the model receives

You are supporting Astralyx.

The customer is Ada Lovelace, on the Team plan.
Their question:

{{question}}

Answer from the retrieved docs. Refunds above £200 go to a human.

Props

No props to configure.

tsx

<PromptVariables
  template={template}
  values={values}
  onChange={setValues}
  multiline={['question']}
/>

Examples

Filling a support prompt

tsx

<PromptVariables template={template} values={values} onChange={setValues} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`PromptVariables`

Extends Omit<ComponentProps<'div'>, 'onChange'>.

Prop	Type	Default	Description
template	string	required	`{{name}}` marks a slot. The variable list is derived from this — there is no second list to fall out of step with it.
values	Record<string, string>	required	Controlled. Unfilled slots are highlighted in the preview instead of being silently interpolated as empty strings.
onChange	(next: Record<string, string>) => void	required	Controlled. Unfilled slots are highlighted in the preview instead of being silently interpolated as empty strings.
multiline	string[]	[]	Which slots get a textarea, and the length past which one is chosen automatically.
hints	Record<string, ReactNode>	—	Descriptions per variable, shown under each field.
previewLabel	string	'What the model receives'	—
variablesLabel	string	'Variables'	—
missingLabel	string	'unfilled'	—
multilineAfter	number	60	Which slots get a textarea, and the length past which one is chosen automatically.

Functions

Function	Signature	Description
promptSlots	(template: string) => string[]	Slot names in the order they first appear. Duplicates collapse.

Behaviour

Topic	Detail	Description
preview	exact output	The literal text that will be sent. A view that renders slots as chips is prettier and answers a different question.