AI Suggestion Chips

Suggestions

Quick-reply suggestion buttons and prompt starters for AI chat interfaces. Includes follow-up suggestions with icons and a grid of conversation starters.

Preview

Default suggestions and prompt starters

Continue the conversation

Or try something new

Suggestions Only

Hide prompt starters section

Continue the conversation

Prompt Starters Only

Hide follow-up suggestions section

Or try something new

Custom Content

Provide your own suggestions and starters

Continue the conversation

Or try something new

Props

AISuggestionChips component API reference

Prop	Type	Default	Description
`suggestions`	`Suggestion[]`	`(default suggestions)`	Array of follow-up suggestion chips with icons
`promptStarters`	`PromptStarter[]`	`(default starters)`	Array of prompt starters for new conversations
`onSelect`	`(text: string) => void`	—	Callback when any suggestion or starter is clicked
`hideSuggestions`	`boolean`	`false`	Hide the follow-up suggestions section
`hidePromptStarters`	`boolean`	`false`	Hide the prompt starters section
`className`	`string`	—	Additional CSS classes for the container

Suggestion Type

Prop	Type	Default	Description
`id*`	`string \| number`	—	Unique suggestion identifier
`text*`	`string`	—	Suggestion text to display and return
`icon`	`LucideIcon`	—	Optional icon component (defaults to ArrowRight)

PromptStarter Type

Prop	Type	Default	Description
`id*`	`string \| number`	—	Unique starter identifier
`text*`	`string`	—	Starter text to display and return
`category`	`string`	—	Optional category label for organization

Usage

Import and implementation example

import { AISuggestionChips } from '@/blocks/ai-conversation/ai-suggestion-chips'
import { Code, Palette, Zap } from 'lucide-react'

export default function Example() {
  const suggestions = [
    { id: 1, text: 'Explain this', icon: Code },
    { id: 2, text: 'Make it pretty', icon: Palette },
    { id: 3, text: 'Optimize it', icon: Zap },
  ]

  const promptStarters = [
    { id: 1, text: 'Write a function...', category: 'coding' },
    { id: 2, text: 'Design a layout...', category: 'design' },
  ]

  const handleSelect = (text) => {
    // Insert into prompt input or start new conversation
    console.log('Selected:', text)
  }

  return (
    <AISuggestionChips
      suggestions={suggestions}
      promptStarters={promptStarters}
      onSelect={handleSelect}
    />
  )
}

Features

Built-in functionality

Follow-up suggestions: Quick-reply chips with icons for continuing conversations
Prompt starters: 2-column grid of starter prompts for new conversations
Icon support: Add any Lucide icon to suggestion chips
Hover effects: Smooth indigo color transitions on hover
Categorized starters: Organize prompt starters by category
Click handler: Single onSelect callback for all interactions
Responsive layout: Flex wrap for chips, 2-column grid for starters
Toggle sections: Show/hide suggestions or starters independently
Dark mode: Full dark mode support with proper contrast

Accessibility

Accessibility considerations

ARIA Attributes

All suggestions and starters are native button elementsIcons are decorative and accompany text labelsSection headers use uppercase text for visual hierarchy

Keyboard Navigation

Key	Action
`Tab`	Navigate between suggestion and starter buttons
`Enter / Space`	Select the focused suggestion or starter

Notes

All buttons have visible text labels
Focus states are visible with default browser outline
Arrow icons on starters indicate actionable items
Section headers provide context for each group
Consider adding role="group" with aria-label for sections

Related Components

AI Prompt Input AI Chat Message AI Welcome State Button