Prompt suggestions

Free · MIT

Prompts to start from. Choosing one puts it in the composer to edit, rather than sending it, because suggestions are model output too. Loading shows placeholders of the right shape; an empty list renders nothing.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/prompt-suggestions

Brings in: chat, locale, skeleton, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { PromptSuggestions } from "@/components/prompt-suggestions"

export default function Example() {
  const [chosen, setChosen] = React.useState("")
  return (
    <div className="flex max-w-lg flex-col gap-3">
      <PromptSuggestions
        suggestions={[
          { id: "1", text: "Which orders are late this week?" },
          { id: "2", text: "Draft a reply to the newest complaint" },
          { id: "3", text: "Summarise yesterday’s refunds" },
        ]}
        onChoose={(s) => setChosen(s.text)}
      />
      {chosen && <p className="text-xs text-muted-foreground">Put in the composer to edit: “{chosen}”</p>}
    </div>
  )
}

<PromptSuggestions>

Prop	Type	Default	Description
suggestionsrequired	`PromptSuggestion[]`	—	What to offer.
onChooserequired	`(suggestion: PromptSuggestion) => void`	—	Called with the chosen one; put it in the composer to edit rather than sending it.
label	`string \| undefined`	—	The heading above the suggestions; "Try asking" by default.
loading	`boolean \| undefined`	false	Shows placeholders while suggestions load.
variant	`"chips" \| "cards" \| undefined`	"chips"	Compact chips, or larger cards for an empty thread.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under promptSuggestions in <LocaleProvider strings={{ … }}>; the table is exported as promptSuggestionsStrings.

Key	English
label	Try asking