Few-Shot Editor

The worked examples in a prompt, as editable pairs rather than one long string. Structured pairs can be counted, reordered, costed and switched off one at a time — a textarea holding six examples supports none of that.

src/components/ui/few-shot-editor.tsx

About

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

The worked examples in a few-shot prompt, as editable pairs.

Few-shot examples are the highest-leverage and least-maintained part of a prompt: they are pasted in as one long string, they drift out of date, and nobody can tell how many there are or how much of the context they occupy.

Editing them as **structured pairs** rather than as prose is the whole point — you can count them, reorder them, disable one to test its effect, and see what they cost. A textarea containing six examples supports none of that.

Disabled examples are kept, not deleted. "Does this example help?" is the most common question here and it is answered by toggling, not by cutting the text out and pasting it back afterwards.

Reordering is by button rather than drag. Order matters to a model — recency inside the prompt carries weight — and two buttons work on a keyboard, on touch, and in a screen reader, which a drag handle does not.

Install

npx astralyx-ui add few-shot-editor

Usage

import { FewShotEditor } from '@/components/ui/few-shot-editor'

<FewShotEditor examples={examples} onChange={setExamples} estimateTokens={estimate} />

Composer

Change the props and the source below follows.

2 of 3 in the prompt · ~42 tokens

1
InputWhere is my refund?Expected outputCheck the order id, then the ledger, then answer with the settlement date.
2
InputCancel my planExpected outputConfirm which plan, then hand off to the billing agent.
3
Inputyou are uselessExpected outputAcknowledge, do not apologise twice, offer a human.

Props

No props to configure.

tsx

<FewShotEditor
  examples={examples}
  onChange={setExamples}
  estimateTokens={(e) => Math.ceil((e.input.length + e.output.length) / 4)}
/>

Examples

Three examples, one switched off

tsx

<FewShotEditor examples={examples} onChange={setExamples} />

API

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

`FewShotEditor`

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

Prop	Type	Default	Description
examples	FewShotExample[]	required	{ id, input, output, disabled? }. Controlled.
onChange	(next: FewShotExample[]) => void	required	{ id, input, output, disabled? }. Controlled.
inputLabel	string	'Input'	—
outputLabel	string	'Expected output'	—
addLabel	string	'Add an example'	—
removeLabel	string	'Remove'	—
moveUpLabel	string	'Move earlier'	—
moveDownLabel	string	'Move later'	—
emptyLabel	string	'No examples yet — the prompt is zero-shot.'	—
estimateTokens	(example: FewShotExample) => number	—	Drives the budget readout. Counts only enabled examples.
tokensLabel	(tokens: number) => ReactNode	(tokens) => `~${tokens.toLocaleString()} tokens`	—
rows	number	2	—

Types

`FewShotExample`

The worked examples in a few-shot prompt, as editable pairs.

Field	Type	Description
id	string	—
input	string	—
output	string	—
disabled?	boolean	Kept in the list, excluded from the prompt. “Does this example help?” is answered by toggling, not by cutting the text out and pasting it back.

Behaviour

Topic	Detail	Description
reordering	buttons, not drag	Order carries weight with a model — recency inside the prompt matters — and two buttons work on a keyboard, by touch and in a screen reader, which a drag handle does not.