React AI Suggestion

Scrollable suggestion pills for quick AI prompts. Build intuitive chat interfaces with React, Next.js, and TypeScript, featuring clickable suggestions and horizontal scrolling for shadcn/ui applications.

AI Elements

Radix UI

Trying to implement AI Elements?

Join our Discord community for help from other developers.

Scrollable suggestion pills for AI chat interfaces with React, Next.js, and TypeScript. Because staring at an empty input box is the worst UX—give users actual prompts to click instead of making them think of questions from scratch. This free open source shadcn/ui component provides quick AI prompts for your conversational AI applications using Vercel AI SDK in JavaScript frameworks.

Horizontal scrolling suggestions

Clickable prompt suggestions with overflow handling:

Loading component...

The React component provides horizontally scrollable pills, smooth overflow behavior on mobile, and click-to-send functionality. Built with TypeScript for type safety and designed for seamless integration in your JavaScript projects.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai.json

bunx shadcn@latest add https://www.shadcn.io/registry/ai.json

Usage

import { Suggestions, Suggestion } from "@/components/ai/suggestion";

<Suggestions>
  <Suggestion suggestion="What are the latest trends in AI?" />
  <Suggestion suggestion="How does machine learning work?" />
  <Suggestion suggestion="Explain quantum computing" />
</Suggestions>;

Why not just let users type?

Blank text boxes are intimidating in AI chat applications. Users don't know what to ask, how to phrase it, or what the conversational AI can even do in React projects. They'll type "hello" and waste everyone's time.

Suggestion pills show AI capabilities immediately in TypeScript components. "Explain quantum computing" tells users this AI handles complex topics. "Write a Python function" shows it codes in JavaScript implementations. Much better than guessing in your Next.js AI application.

Usage with AI SDK

Quick-start conversations with clickable prompts in React applications:

"use client";

import { Suggestions, Suggestion } from "@/components/ai/suggestion";
import {
  Conversation,
  ConversationContent,
} from "@/components/ai/conversation";
import { Message, MessageContent } from "@/components/ai/message";
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputSubmit,
} from "@/components/ai/prompt-input";
import { Response } from "@/components/ai/response";
import { useChat } from "@ai-sdk/react";
import { useState } from "react";

const starterPrompts = [
  "What can you help me with?",
  "Explain how AI works in simple terms",
  "Give me creative project ideas",
  "Help me learn something new today",
];

export default function SuggestionChat() {
  const [input, setInput] = useState("");
  const { messages, append, status } = useChat();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      append({ role: "user", content: input });
      setInput("");
    }
  };

  const handleSuggestionClick = (suggestion: string) => {
    append({ role: "user", content: suggestion });
  };

  return (
    <div className="flex flex-col h-full max-w-4xl mx-auto">
      {messages.length === 0 && (
        <div className="flex flex-col items-center justify-center flex-1 p-8">
          <h2 className="text-2xl font-semibold mb-4">
            How can I help you today?
          </h2>
          <Suggestions>
            {starterPrompts.map((prompt) => (
              <Suggestion
                key={prompt}
                suggestion={prompt}
                onClick={handleSuggestionClick}
              />
            ))}
          </Suggestions>
        </div>
      )}

      {messages.length > 0 && (
        <Conversation>
          <ConversationContent>
            {messages.map((message) => (
              <Message from={message.role} key={message.id}>
                <MessageContent>
                  <Response>{message.content}</Response>
                </MessageContent>
              </Message>
            ))}
          </ConversationContent>
        </Conversation>
      )}

      <PromptInput onSubmit={handleSubmit}>
        <PromptInputTextarea
          value={input}
          onChange={(e) => setInput(e.currentTarget.value)}
          placeholder="Type your message..."
        />
        <PromptInputSubmit disabled={!input.trim()} status={status} />
      </PromptInput>
    </div>
  );
}

Backend route for handling suggestions:

// app/api/chat/route.ts
import { streamText, convertToModelMessages } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: "openai/gpt-4o",
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

Examples

Dynamic follow-up suggestions

Generate contextual suggestions based on conversation:

Loading component...

'use client';import {   Suggestions,   Suggestion } from '@/components/ui/shadcn-io/ai/suggestion';import { useState, useEffect } from 'react';import { SparklesIcon, MessageSquareIcon } from 'lucide-react';const Example = () => {  const [messages, setMessages] = useState<string[]>([]);  const [currentSuggestions, setCurrentSuggestions] = useState<string[]>([]);  const [isGenerating, setIsGenerating] = useState(false);  // Simulate generating contextual suggestions based on conversation  const generateSuggestions = (lastMessage: string) => {    setIsGenerating(true);        // Simulate API delay    setTimeout(() => {      if (lastMessage.toLowerCase().includes('ai')) {        setCurrentSuggestions([          "How do neural networks learn?",          "What's the latest in GPT models?",          "Explain AI safety concerns",          "Show me practical AI applications",        ]);      } else if (lastMessage.toLowerCase().includes('code') || lastMessage.toLowerCase().includes('programming')) {        setCurrentSuggestions([          "Compare TypeScript vs JavaScript",          "Best practices for clean code",          "How to optimize performance",          "Explain design patterns",        ]);      } else if (lastMessage.toLowerCase().includes('data')) {        setCurrentSuggestions([          "How to structure a database",          "Explain data normalization",          "What are database indexes?",          "SQL query optimization tips",        ]);      } else {        // Default suggestions        setCurrentSuggestions([          "Tell me more about this",          "Can you give an example?",          "What are the alternatives?",          "How does this work in practice?",        ]);      }      setIsGenerating(false);    }, 500);  };  const handleSuggestionClick = (suggestion: string) => {    const newMessages = [...messages, suggestion];    setMessages(newMessages);    generateSuggestions(suggestion);  };  // Initial suggestions  useEffect(() => {    setCurrentSuggestions([      "Tell me about AI and machine learning",      "Explain modern programming concepts",      "How do databases work?",      "What's new in web development?",    ]);  }, []);  return (    <div className="p-8 w-full space-y-4">      {messages.length > 0 && (        <div className="space-y-2 mb-4">          <div className="flex items-center gap-2 text-sm text-muted-foreground">            <MessageSquareIcon className="h-4 w-4" />            <span>Conversation history:</span>          </div>          <div className="space-y-1">            {messages.map((msg, idx) => (              <div key={idx} className="text-sm bg-secondary rounded-lg px-3 py-2">                {msg}              </div>            ))}          </div>        </div>      )}            <div>        <div className="flex items-center gap-2 mb-3">          <SparklesIcon className={`h-4 w-4 text-muted-foreground ${isGenerating ? 'animate-pulse' : ''}`} />          <p className="text-sm text-muted-foreground">            {isGenerating ? 'Generating suggestions...' : 'Suggested follow-ups based on context:'}          </p>        </div>                {!isGenerating && (          <Suggestions>            {currentSuggestions.map((suggestion) => (              <Suggestion                key={suggestion}                suggestion={suggestion}                onClick={handleSuggestionClick}                variant={messages.length === 0 ? "outline" : "secondary"}              />            ))}          </Suggestions>        )}      </div>      {messages.length > 0 && (        <button          onClick={() => {            setMessages([]);            setCurrentSuggestions([              "Tell me about AI and machine learning",              "Explain modern programming concepts",              "How do databases work?",              "What's new in web development?",            ]);          }}          className="text-xs text-muted-foreground hover:text-foreground transition-colors"        >          Reset conversation        </button>      )}    </div>  );};export default Example;

Features

Horizontal scrolling container with hidden scrollbar in React applications
Click-to-send functionality with suggestion callbacks for TypeScript components
Customizable button variants (outline, solid, ghost, etc.) in JavaScript frameworks
Flexible sizing options (sm, default, lg) for Next.js projects
Responsive design with touch-friendly scrolling
Automatic overflow handling for many suggestions
Rounded pill styling for modern appearance
Accessible keyboard navigation
Perfect for AI chat applications, onboarding, empty states, and follow-up prompts
Free open source component built for Next.js with shadcn/ui design system and AI Elements
Optimized for Vercel AI SDK and conversational AI interfaces

API Reference

Suggestions

Scrollable container for suggestion pills.

Prop	Type	Description
`className`	`string`	Additional CSS classes
`...props`	`ComponentProps<typeof ScrollArea>`	ScrollArea component props

Suggestion

Individual clickable suggestion button.

Prop	Type	Default	Description
`suggestion`	`string`	-	Required - Text to display and emit
`onClick`	`(suggestion: string) => void`	-	Callback when clicked
`variant`	`ButtonVariant`	`"outline"`	Button style variant
`size`	`ButtonSize`	`"sm"`	Button size
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Custom content (overrides suggestion)
`...props`	`Omit<ComponentProps<typeof Button>, "onClick">`	-	Button component props

Keyboard interactions

Key	Description
`Tab`	Navigate between suggestions
`Enter` / `Space`	Select focused suggestion
`Arrow Keys`	Scroll through suggestions when focused

Production tips

Keep suggestions short. Long text breaks the pill design in React applications. Aim for 3-7 words per suggestion in TypeScript components.

Make them actionable. Use verbs and clear intentions: "Explain...", "Show me...", "Help with..." in JavaScript implementations.

Rotate suggestions. Show different prompts on each visit to encourage exploration in Next.js projects.

Context matters. After initial interaction, show follow-up suggestions relevant to the conversation in React applications.

Mobile scrolling needs testing. Ensure smooth horizontal scrolling on touch devices in TypeScript frameworks.

Limit suggestion count. 3-5 visible suggestions work best in JavaScript applications. Too many overwhelm users.

Integration with other components

Suggestions works seamlessly with PromptInput for complete input experiences in React applications. Use within Conversation for contextual follow-ups in Next.js projects. Combine with Message for suggested responses. This free open source component integrates seamlessly with modern JavaScript frameworks.

React AI Suggestion

Horizontal scrolling suggestions

Installation

Usage

Why not just let users type?

Usage with AI SDK

Examples

Dynamic follow-up suggestions

Features

API Reference

Suggestions

Suggestion

Keyboard interactions

Production tips

Integration with other components

Questions developers actually ask

On this page

React AI Suggestion

Reactai/suggestion

Reactai/suggestion

How do I generate suggestions dynamically?

Should I track which suggestions get clicked?

When should I show suggestions?

How do suggestions work on mobile?

Can I customize the pill appearance?

On this page