Suggestions

AI chats 31

About

A row of clickable prompt suggestion chips that let users pick a common query to fill an AI chat input, with optional variants, vertical layout, and an expandable panel of related suggestions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Suggestions to your project and fits it to your theme.

Code

How Suggestions is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  Suggestions,
  SuggestionList,
  Suggestion,
} from "@/components/ui/suggestions";

export default function SuggestionDefault() {
  return (
    <Suggestions onSelect={(value) => console.log(value)}>
      <SuggestionList className="justify-center max-w-lg">
        <Suggestion>What is AI?</Suggestion>
        <Suggestion>Teach me Engineering from scratch</Suggestion>
        <Suggestion>Design a weekly workout plan</Suggestion>
        <Suggestion>Places to visit in France</Suggestion>
        <Suggestion>How to learn React?</Suggestion>
      </SuggestionList>
    </Suggestions>
  );
}