All components (244)

Template editor

AI · PromptTemplateEditor

What it is and when to use it

Edit a text template with variables between double braces: a prompt, an email or a canned reply. It has the text, buttons to insert the variables, a test field per variable and the preview with the values in place.

When to use it

The instructions of an assistant, an automatic reply, an email template.
variables are the ones the application knows how to fill: they appear as buttons to insert them at the cursor, with their description and a sample for the preview. Variables not on the list are warned about.
The preview marks the variables without a value and lists them below.
It counts characters and a token estimate (one every four characters: order of magnitude, not a model's count). maxLength warns when exceeded.

When not to

Writing a message to an assistant: PromptInput.
Formatted text: RichTextEditor.

Keyboard: the text is a normal field; the variable buttons write at the cursor and give focus back to the text.

Accessibility: each test field is named after its variable and carries its description; the character count is announced without moving focus and the preview is a named region.

Fine appearance: the preview is in code font; a variable without a value carries the soft warning background.

What it looks like

Assistant instructions

114 characters, about 27 tokens (estimate)

Variables that are not on the list: tienda.

Variable values

tienda

idioma

Language of the reply

cliente

Customer name

Preview

You are the assistant for {{tienda}}. Answer in Spanish to the customer Lucía and offer them their order.

No value: tienda.

<PromptTemplateEditor
  label="Assistant instructions"
  value={plantilla}
  onChange={setPlantilla}
  variables={[
    { name: "store", description: "Shop name", sample: "Aurelia Jewelry" },
    { name: "cliente", description: "Customer name", sample: "Lucía" },
  ]}
  maxLength={600}
  rows={5}
/>

Props

Import it with import { PromptTemplateEditor } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Which template it is («Reply to a complaint»). Required: it is the label of the field.
`onChange`required	`(value: string) => void`	—
`value`required	`string`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`maxLength`	`number`	The maximum number of characters of the template. Without it, none.
`onValuesChange`	`(values: Readonly<Record<string, string>>) => void`	—
`rows`	`number`	—
`values`	`Readonly<Record<string, string>>`	The test values of each variable, for the preview. Without it, the editor keeps them starting from each variable's sample.
`variables`	`readonly PromptVariable[]`	The variables the application knows how to fill: they appear as buttons to insert them and those not on the list are warned about.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: