Prompt Builder

An interactive multi-turn prompt editor that lets users construct system, user, and assistant conversation turns. Each turn can be added, edited, reordered, or removed. Useful for prompt engineering workflows and chat playground UIs.

28 chars

6 chars

import { PromptBuilder } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add prompt-builder

Import

import.tsx

import { PromptBuilder } from "@aetherstack/patterns"

Usage

prompt-builder.tsx

import * as React from "react"
import { PromptBuilder } from "@aetherstack/patterns"

export function MyPromptEditor() {
  const [turns, setTurns] = React.useState([
    { role: "system" as const, content: "You are a helpful assistant." },
    { role: "user" as const, content: "Hello!" },
  ])

  return (
    <PromptBuilder
      turns={turns}
      onTurnsChange={setTurns}
      className="max-w-lg"
    />
  )
}

Props

Prop	Type	Default	Description
turns	Turn[]	[{role:"system",content:""}]	Array of conversation turns. Each turn has a role and content string.
onTurnsChange	(turns: Turn[]) => void	—	Called whenever the user adds, edits, reorders, or removes a turn.
className	string	—	Additional CSS classes applied to the root container.

* Required

Accessibility

→Each turn row includes a labelled role selector and a textarea with a descriptive aria-label.
→Add and remove buttons include aria-label attributes describing their action.
→Keyboard users can tab through all turn controls in logical document order.