Suggestion – Code

Implementation
Suggestion Props
SuggestionList Props

Common Examples

To use a single Suggestion, pass a required label and handle selection with onPress. Supply the label already localized; the component renders it verbatim.

import { Suggestion } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <Suggestion
      label="Show overdue invoices"
      onPress={() => sendPrompt("Show overdue invoices")}
    />
  );
}

Suggestion list

Use SuggestionList for a wrapping group of chips. Each string in suggestions becomes a Suggestion. onSelect receives the selected string and index.The list does not enforce content limits. Keep the set to three suggestions of about 40 characters each.

Wrapping

Suggestions wrap to new lines when the container runs out of space.

Disabled

Set isDisabled on a single Suggestion to block selection.

Internationalization

Suggestion labels are consumer content and must be localized before they are passed to the component. SuggestionList uses ai-kit.suggestionList.label for its default group name. Pass aria-label to override it, or mount AiKitIntlProvider inside CartoTheme to override the message globally.

<AiKitIntlProvider
  messages={{
    "ai-kit.suggestionList.label": "Suggested next steps",
  }}
>
  <SuggestionList
    suggestions={["Show overdue invoices"]}
    onSelect={sendPrompt}
  />
</AiKitIntlProvider>

React Accessibility

Suggestion uses its visible label as its accessible name.
SuggestionList exposes its chips as one role="group" named by a localized label.
Users activate a focused suggestion with Enter or Space.

<Suggestion
  label="Show overdue invoices"
  onPress={() => sendPrompt("Show overdue invoices")}
/>

`Suggestion` Props

The Suggestion accepts the following props and forwards remaining React Aria Button props except children, className, style, and isPending.

string

required

Visible text and accessible name. Supply a short, localized follow-up prompt.

string

Class merged onto the chip.

boolean

Disables selection.

(e: PressEvent) => void

Handles selection for click, touch, and keyboard activation.

<SuggestionList
  suggestions={["Show overdue invoices", "Summarize recent jobs"]}
  onSelect={(suggestion, index) => sendPrompt(suggestion)}
/>

`SuggestionList` Props

The SuggestionList accepts the following props and forwards remaining <div> attributes except children, the DOM onSelect event, and style.

(suggestion: string, index: number) => void

required

Called when a suggestion is selected. The consumer owns inserting the text and dismissing the list.

string[]

required

Suggestions to render in order. Each string is both the visible label and the selection payload.

string

Accessible name for the suggestion group. When omitted, the component uses the localized ai-kit.suggestionList.label message.

string

Class merged onto the list container.

AI Kit

Agent Experience

Suggestion – Code

Common Examples

Suggestion list

Wrapping

Disabled

Internationalization

React Accessibility

`Suggestion` Props

`SuggestionList` Props

​Common Examples

​Suggestion list

​Wrapping

​Disabled

​Internationalization

​React Accessibility

​Suggestion Props

​SuggestionList Props

Common Examples

Suggestion list

Wrapping

Disabled

Internationalization

React Accessibility

`Suggestion` Props

`SuggestionList` Props