# Suggestions

Clickable prompt chips that offer users a quick way to start or continue a conversation — no typing required.

<p class="kai-tag-sub">kai-suggestions</p>

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.

## Preview

> **tip:** 
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`:

```html
<kai-suggestions id="suggs" variant="outline"></kai-suggestions>
<script type="module">

  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.

## Examples

### Default (Outline Pills)

### Ghost Variant

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

### Block Layout

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

### With Highlighted Search

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

### Small Chips

### Label and Value Differ

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

## Props

## Events

## Composed from