Suggestions

kai-suggestions

A row (or full-width list) of clickable prompt chips — drop it above an input in the welcome state or below the last assistant message as follow-up shortcuts.

• Shadow DOM
• 3 chip styles
• Block layout mode
• Substring highlight
• 1 event

Preview

When to use

Place <kai-suggestions> above the prompt input when the thread is empty to show users what the assistant can do. It also works below the last assistant reply as follow-up chips. Use block to stack full-width rows in narrow layouts, and highlight for a filtered autocomplete list.

Usage

Assign the suggestions property and listen for kai-select:

<kai-suggestions id="suggs" variant="outline"></kai-suggestions>
<script type="module">
  import '@kitn.ai/ui/elements';
  const suggs = document.getElementById('suggs');
  suggs.suggestions = ['Explain the architecture', 'Show me a code example'];
  suggs.addEventListener('kai-select', (e) => console.log(e.detail.value));
</script>

For the declarative path, use <kai-suggestion> children — value sets the emitted value, text content is the label. Prop items render first; declarative children are appended after.

Examples

Default (Outline Pills)

Code

Ghost Variant

variant="ghost" — no border, subtle hover. Good when chips should blend into the surrounding UI.

Code

Block Layout

block stacks suggestions as full-width rows — useful in sidebars or constrained panels.

Code

With Highlighted Search

highlight emphasises the matching substring in every chip — ideal for autocomplete or search-suggestion lists.

Code

Small Chips

Code

Label and Value Differ

Pass { label, value } objects when the displayed text and the emitted value should differ.

Code

Props

Property	Type	Default	Notes
suggestions	(string | { … })[]	[]	The suggestions. Strings, or `{ label, value }` when the displayed text and the emitted value differ. Set as a JS property.
variant	"ghost" | "default" | "outline"	'outline'	Chip style: `'outline'` (default), `'ghost'`, or `'default'` (filled).
size	"sm" | "lg" | "md" | "icon" | "icon-sm"	—	Size preset for each chip. Defaults to the pill default (`'lg'`); pass `'sm'` for smaller pills (or `'md'`).
block	boolean	false	Full-width left-aligned rows instead of pills.
highlight	string	—	Substring to highlight within each suggestion.

Events

Event	Detail	Notes
kai-select	{ … }	A suggestion was clicked.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

PromptSuggestion

---

Need a hand? Report a bug Ask for help