126k
New

Suggestion

PreviousNext

A short prompt you can send to the agent in one click.

Base UIReact AriaRadix UI
"use client"

import * as React from "react"

Suggestion is a prompt you send without typing. Each one is a Button with the prompt as its label. Put a row of them above the Prompt Input.

Installation

Suggestion is built with the Button component.

pnpm dlx shadcn@latest add button

Usage

import { Button } from "@/components/ui/button"
<div className="scrollbar-none flex scroll-fade-x gap-2 overflow-x-auto overscroll-x-contain">
  {suggestions.map((suggestion) => (
    <Button
      key={suggestion}
      variant="outline"
      size="sm"
      className="shrink-0"
      onClick={() => send(suggestion)}
    >
      {suggestion}
    </Button>
  ))}
</div>

Scrolling

The row scrolls sideways when the suggestions do not fit. scroll-fade-x fades the edge that has more to show, and shrink-0 keeps each label on one line.

AI SDK

The label is the message. Send it as is.

sendMessage({ text: suggestion })

Migrating from AI SDK Elements

If you added Suggestion from AI SDK Elements, 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.

Prompt
Migrate components/ai-elements/suggestion.tsx from AI SDK Elements to the shadcn/ui 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. Install Button: npx shadcn@latest add button
2. Read https://ui.shadcn.com/docs/ai-elements/base/suggestion.md and build Suggestion the same way.
3. Rebuild each part:
   - Suggestions renders a div with className="flex scroll-fade-x scrollbar-none 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.
4. Remove the imports the file no longer uses.
5. Run the type checker and fix any errors.