Suggestion for React

A row of short prompts sits above the message field, and a click sends one as it reads.

Use it for the first turn, when the reader doesn't know what to ask, and for follow-ups the agent can predict. Each suggestion is a Button with the prompt as its label, so there is no Suggestion component to install in React: the row is yours to edit. Keep each label short enough to read at a glance, and send the label as the message, word for word.

Installation

Suggestion is a pattern. The command adds the parts it's built from, Button and the scroll-fade utility, and the code to copy is the demo's.

Anatomy

Row (div, scroll-fade-x)
└── Button (one per suggestion)

Usage

import { Button } from "@/components/ui/button";

const suggestions = ["Add a dark mode toggle", "Fix the failing build"];

export function Suggestions(props: { onSend: (prompt: string) => void }) {
  return (
    <div className="scrollbar-none flex scroll-fade-x gap-2 overflow-x-auto overscroll-x-contain">
      {suggestions.map((suggestion) => (
        <Button
          className="shrink-0"
          key={suggestion}
          onClick={() => props.onSend(suggestion)}
          size="sm"
          variant="outline"
        >
          {suggestion}
        </Button>
      ))}
    </div>
  );
}

Demos

Scrolling

Five suggestions in a column as narrow as a phone's composer, and a line that says which one was sent. The row scrolls sideways when the labels don't fit: scroll-fade-x fades the edge that has more to show and follows the reading direction, shrink-0 keeps each label on one line, and overscroll-x-contain stops a swipe at the end from moving the page. With three or four suggestions and the room to show them all, wrap the row (flex-wrap, no fade) instead.

AI SDK

The label is the message. Send it as it is.

import { useChat } from "@ai-sdk/react";

const { sendMessage, status } = useChat();

sendMessage({ text: suggestion });

Hide or disable the row while a reply streams, so a second click doesn't queue a message the reader didn't mean to send: with the AI SDK, while status is submitted or streaming.

Migrating from AI SDK Elements

If you added Suggestion from AI SDK Elements (opens in a new tab), your project has a components/ai-elements/suggestion.tsx wrapper. Paste this prompt into your coding agent to rebuild it on Button. Every export keeps its name and props, so the code that uses it keeps working.

Migrate components/ai-elements/suggestion.tsx from AI SDK Elements to the shadcn.io Button component.

Keep every export, with the same name and props, so the code that imports it keeps working. Only change how each part renders.

1. Read https://kit.dev/ui/suggestion.md and build Suggestion the same way. If the project hasn't got Button and the scroll-fade utility, run the command in its Installation section.
2. Rebuild each part:
   - Suggestions renders a div with className="scrollbar-none flex scroll-fade-x gap-2 overflow-x-auto overscroll-x-contain", instead of a ScrollArea. Change SuggestionsProps to ComponentProps<"div">.
   - Suggestion renders a Button with variant="outline", size="sm" and className="shrink-0". Keep onClick, called with the suggestion.
3. Remove the imports the file no longer uses.
4. Run the type checker and fix any errors.

FAQ

API Reference

Suggestion has no props of its own. Each suggestion is a Button: variant, size and the click handler are Button's. The row is a div with the scroll-fade utility's scroll-fade-x class.