Vercel

Suggestion

AI chats 8

About

Here is Suggestion component

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

Code

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

Usage.tsx

import { Suggestion, Suggestions } from '@/components/ui/suggestion';

export default function DemoOne() {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '100vh',
      padding: '2rem'
    }}>
      <Suggestions>
        <Suggestion suggestion="What are the latest trends in AI?" />
        <Suggestion suggestion="How to learn React in 2025?" />
        <Suggestion suggestion="Best practices for project management" />
        <Suggestion suggestion="Compare Next.js and Remix" />
        <Suggestion suggestion="Explain the theory of relativity" />
      </Suggestions>
    </div>
  );
}

More by Vercel

View all
  • Announcement

    Announcement

    291
  • Message

    Message

    48
  • Conversation

    Conversation

    42
  • Task

    Task

    41
  • Inline Citation

    Inline Citation

    38
  • Loader

    Loader

    23
  • Sources

    Sources

    20
  • Code Block

    Code Block

    12

More in AI chats

View all
  • AI Actions

    AI Actions

    326
  • Agent Chat

    Agent Chat

    18
  • Message Thread

    Message Thread

    45
  • Attachments

    Attachments

    22
  • Color Picker

    Color Picker

    110
  • Environment Variables

    Environment Variables

    14
  • System Message

    System Message

    58
  • AI Diff

    AI Diff

    74