Mischief

13 / Agent UI

Suggestions

A row of prompts to start or continue with, for the moment someone does not know what to ask.

Live previewSource

Pick one to start.

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

const prompts = [
  { id: "summary", label: "Summarise this document" },
  { id: "risks", label: "Find the risks" },
]

export function Starters() {
  return <Suggestions suggestions={prompts} onSelect={send} />
}

API

suggestionsSuggestion[]Id, label, and an optional prompt and icon.
onSelect(suggestion: Suggestion) => voidRuns with the chosen suggestion.
disabledbooleanDisables every suggestion at once.
labelstringThe accessible name of the row.

Accessibility

The row is a labelled navigation landmark holding a list of buttons, so it can be skipped or entered deliberately rather than being an unlabelled run of controls. It scrolls horizontally with snap points and every target meets the minimum touch size. Nothing is rendered at all when there is nothing to suggest.

Dependencies