Custom instructions

The personalization editor: a response style with a sample answer, what the assistant should know about you, and how it should respond, with live character counts.

Markdown

On this page

Response style with a sample answer, what to know about you, how to respond, and a draft that saves with Cmd+Enter.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/custom-instructions.json

Usage

tsx

import { CustomInstructions } from "@/components/ui/chatcn/custom-instructions"

<CustomInstructions
  value={saved}
  onSave={async (next) => {
    await saveInstructions(next)
  }}
/>

The editor keeps its own draft and shows Unsaved changes until Save. Return a promise from onSave to show Saving and Saved; throw to show the error. It refuses to save past the limit and says by how much to shorten.

Examples

Fields and limits

InstructionsField and PersonalityPicker work on their own for custom layouts.

A field near its limit, one over it, and the style picker on its own.

Props

Prop	Type	Notes
`value`	`Partial<{ about, style, personality }>`	The saved instructions
`onSave`	`(value) => void \| Promise<void>`
`personalities`	`Personality[]`	`{ id, label, description, sample? }`
`limit`	`number`	Per field. Default 1500
`suggestions`	`string[]`	Lines that append to How should it respond
`disabled`	`boolean`

Keyboard

Key	Action
`Cmd+Enter`, `Ctrl+Enter` in a field	Save. Never fires during IME composition
Arrow keys in the style list	Move and select

Accessibility

Each text area has a real label and its description as aria-describedby. Over the limit it is aria-invalid, with the fix in text.
The counter announces only when it crosses a threshold, never on each keystroke. The save status is a polite live region.
Suggestions are toggle buttons with aria-pressed once their line is in the text.

Motion

A suggestion's plus turns into a check with the 150 ms blur crossfade. The sample answer fades when the style changes.
Nothing moves while typing.