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';

  await customElements.whenDefined('kai-suggestions');

  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.

Child element	Attributes	Text content	Notes
<kai-suggestion>	iconvalue	Yes	Parse a single `<kai-suggestion>` node into an `Item` descriptor.

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
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
suggestions	(string | { … })[]	[]	The suggestions. Strings, or `{ label, value }` when the displayed text and the emitted value differ. Set as a JS property. Omit to supply them as `<kai-suggestion>` light-DOM children instead; when both are present the property's suggestions come first.
variant	"outline" | "ghost" | "default"	'outline'	Chip style: `'outline'` (default), `'ghost'`, or `'default'` (filled).
size	"md" | "lg"	'md'	Row height for `layout="list"`: `'md'` (default) or `'lg'` for taller rows. Chips are unaffected.
layout	"chips" | "list"	'chips'	Layout: `'chips'` (default) renders a wrapping row of rounded pills; `'list'` renders a vertical, full-width "Ideas for you" list where each row is left-aligned with a leading `icon`, a label, and a hover background.
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