Suggestions

Ready-made prompts: cards on an empty chat, chips after a turn.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { Stack, Suggestions, Text } from '@kerf-js/veneer'import type { Suggestion } from '@kerf-js/veneer'export function Starters() {  const picked = state<Suggestion | null>(null)  return (    <Stack gap="related">      <Suggestions        items={STARTERS}        onPick={(s) => (picked.value = s)}      />      <Text        role="caption"        subtle      >        {picked.value          ? `Sends: ${picked.value.title}`          : 'Pick one to send it.'}      </Text>    </Stack>  )}const STARTERS = [  {    title: 'Why did my deploy fail?',    description: 'Reads the last failed build',  },  {    title: 'Roll back mobile-bff',    description: 'Asks before it changes anything',  },  {    title: 'What changed today?',    description: 'Every deploy across your projects',  },  {    title: 'Which project costs the most?',    description: "From this month's usage",  },]

Installation

npm install @kerf-js/veneer

Usage

tsx

import { Suggestions } from '@kerf-js/veneer'

Chips

For follow-ups, usually inside the Prompt.

tsx

import { Suggestions } from '@kerf-js/veneer'export function Chips() {  return (  <Suggestions    items={CHIPS}    variant="chips"  />  )}const CHIPS = [  { title: 'Roll it back' },  { title: 'Show me the failing check' },]

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`items`	`Suggestion[]`	—	Each has a `title` and an optional `description`.
`variant`	`"cards" \| "chips"`	—	`cards` or `chips`.

Event	Type	Default	Description
`onPick`	`((s: Suggestion) => void)`	—	Pressing one. Usually sends it.

RelatedPrompt Conversation