Instructions editor

Pro

An agent's standing instructions, with variables like {{workspace.name}} that are filled in per run. Variables are checked as you type: a known one is listed with what it becomes; an unknown one is flagged, because it would reach the model as literal braces. Insert any known variable from the list.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/instructions-editor

Brings in: locale, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { InstructionsEditor, type InstructionVariable } from "@/components/instructions-editor"

const variables: InstructionVariable[] = [
  { name: "agent.name", description: "This agent’s display name", example: "Dev agent" },
  { name: "account.name", description: "The customer account", example: "Acme" },
  { name: "env.stage", description: "Production or the environment’s name", example: "Staging" },
]

export default function Example() {
  const [value, setValue] = React.useState(
    "You are {{agent.name}} on {{account.name}}’s software team.\n\nWork in {{env.stage}} unless someone names another environment. Never apply a migration to Production yourself: open an approval request.\n\nName new feature flags with the {{team.prefix}} prefix."
  )
  return <InstructionsEditor className="max-w-2xl" value={value} onChange={setValue} variables={variables} maxLength={4000} />
}

<InstructionsEditor>

Prop	Type	Default	Description
valuerequired	`string`	—	The instructions text, with {{variables}} as written.
onChangerequired	`(value: string) => void`	—	Called with the new text on each edit or variable insert.
variablesrequired	`InstructionVariable[]`	—	The variables a run fills in; any other {{name}} is flagged as unknown.
maxLength	`number \| undefined`	8000	Most characters allowed, shown as a count. Defaults to 8000.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under instructionsEditor in <LocaleProvider strings={{ … }}>; the table is exported as instructionsEditorStrings.

Key	English
instructions	Instructions
insert	Insert
length	{length} / {max}
unknown	{ one: "Unknown variable: {names}. It would reach the model as written.", other: "Unknown variables: {names}. They would reach the model as written.", }

Types

InstructionVariable: { name: string; description: string; example: string }