Suggestion

"use client"

import { ArrowUpIcon, PlusIcon } from "@phosphor-icons/react"
import * as React from "react"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Button } from "@/components/ui/button"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupTextarea,
} from "@/components/ui/input-group"
import { Message, MessageContent } from "@/components/ui/message"

const suggestions = [
  "Add a dark mode toggle",

A 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

Suggestions are built with Button and Input Group.

$ pnpm dlx shadcn@latest add @esuiss/button @esuiss/input-group

Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add button input-group

Usage

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

<div className="flex 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>

The row scrolls sideways when the suggestions do not fit, and shrink-0 keeps each label on one line.

AI SDK

The label is the message. Send it as is.

sendMessage({ text: suggestion })

API Reference

See Button.

Accessibility

Each suggestion is a button whose label is the prompt, so it is announced as written.
Keep labels short and specific, so the row can be scanned quickly.

import { ScrollView, View } from "react-native"
import { Button } from "@/components/ui/button"
import { Text } from "@/components/ui/text"

const suggestions = [
  "Why does the build fail?",
  "Add dark mode",
  "Write tests for the cart",
  "Explain this error",
]

export function AiSuggestionExample() {
  return (
    <View className="w-full gap-3">
      <Text className="text-muted-foreground">Try asking</Text>
      <ScrollView

import EsuissUI
import SwiftUI

struct SuggestionExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 12) {
      Text("Try asking").textStyle(.sm).foregroundStyle(EsuissColor.mutedForeground)
      ScrollView(.horizontal, showsIndicators: false) {
        HStack(spacing: 8) {
          ForEach(["Why does the build fail?", "Add dark mode", "Write tests for the cart", "Explain this error"], id: \.self) { suggestion in
            Button(suggestion) {}
              .buttonStyle(.variant(.outline, size: .sm))
          }
        }
      }
    }

import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.ButtonSize
import com.esuiss.ui.components.ButtonVariant
import com.esuiss.ui.components.Text
import com.esuiss.ui.theme.EsuissTheme

@Composable

Suggestion on mobile is built from the same parts as on the web: Button. The example above is a static demo; connect it to your agent by rendering the same parts from your messages.

Installation

$ pnpm dlx @esuiss/ui@latest add button

$ pnpm dlx @esuiss/ui@latest add button --platform swift

$ pnpm dlx @esuiss/ui@latest add button --platform kotlin

API Reference

See Button.

Usage

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

<div className="flex 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>

The row scrolls sideways when the suggestions do not fit, and shrink-0 keeps each label on one line.

import { ScrollView, View } from "react-native" import { Button } from "@/components/ui/button" import { Text } from "@/components/ui/text" const suggestions = [ "Why does the build fail?", "Add dark mode", "Write tests for the cart", "Explain this error", ] export function AiSuggestionExample() { return ( <View className="w-full gap-3"> <Text className="text-muted-foreground">Try asking</Text> <ScrollView