What is a Chord?
Reads runtime state
Each chord hooks into thread, composer, or message state — you don't think about conditionals.
Makes rendering decisions
Running? Show cancel. Empty? Disable send. Error? Show retry. The chord handles the logic.
You own the visuals
Override any class, swap any icon, or provide a custom render function. Zero design lock-in.
Before & After
Before — 40+ lines
<ActionBarPrimitive.Root
hideWhenRunning
autohide="not-last"
autohideFloat="single-branch"
>
<ActionBarPrimitive.Copy asChild>
<button>
<AuiIf condition={...}>
<CheckIcon />
</AuiIf>
<AuiIf condition={...}>
<CopyIcon />
</AuiIf>
</button>
</ActionBarPrimitive.Copy>
<ActionBarPrimitive.Reload asChild>
<button><ReloadIcon /></button>
</ActionBarPrimitive.Reload>
</ActionBarPrimitive.Root>After — 1 line
<MessageActionBar
actions={["copy", "reload"]}
/>Major Chords
Read runtime state, make multi-branch rendering decisions, compose multiple primitives with logic.
ComposerActionStatus
Send/cancel button that auto-switches based on thread state.
MessageActionBar
Config-driven action bar for messages — copy, reload, edit, speak.
BranchNavigation
Navigate between message branches with prev/next controls.
MessageStatus
Loading spinner during streaming, error message on failure.
EditComposer
Inline message editor with cancel and save actions.
FollowUpSuggestions
Dynamic suggestion chips after assistant responses.
ToolCallRenderer
Display tool calls with automatic status-aware UI — spinner, result, and error handling.
Attachment
File and image attachments for composer and messages.
Minor Chords
Compose 2+ primitives into patterns every app rebuilds — simple state, real boilerplate savings.
Install
npm install @assistant-ui/chords