VariableChip

Linear-style {{var}} inline pill for prompt templates. Required-but-unset chips warn in amber.

Inspired by Linear template variables, Anthropic Console prompt variables.

Preview

What it looks like.

Hi , here's a summary of on .

The team discussed and assigned next steps.

Usage

Drop it into your app.

import { VariableChip, renderTemplate } from '@locara/components'

const template = "Hi {{name}}, here's a summary of {{meeting_title}} on {{date}}."

const bindings = { name: 'Sarah', meeting_title: 'Weekly stand-up' }
const required = ['date']

<p>
  {renderTemplate(
    template,
    (name) => bindings[name],
    {
      onEdit: (name) => openEditModal(name),
      required: (name) => required.includes(name),
    }
  )}
</p>

Or copy the source into your repo: locara add variable-chip

Design notes

Why it works this way.

Three tones: `accent` (default, set value), `neutral` (set value, low emphasis), `warning` (required but unset — amber). The `renderTemplate()` helper turns a `{{x}}`-containing string into a mixed React array of text and chips, ready to drop into prose.