AI Prompt Suggestion Chips

AI chats

About

A row of categorized quick-prompt suggestion chips that spring into view and populate an AI prompt input with one tap.

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

Code

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

Usage.tsx

import AiPromptChips from "@/components/ui/ai-prompt-chips";
import { useState } from "react";

export default function AiPromptChipsDemo() {
  const [prompt, setPrompt] = useState("");

  return (
    <div className="w-full min-h-screen flex flex-col items-center justify-center gap-4 p-8 bg-black">
      <textarea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Ask AI to build something..."
        className="w-full max-w-[800px] h-20 resize-none rounded-xl bg-white/[0.04] border border-white/[0.08] text-sm text-white placeholder:text-neutral-500 p-3 focus:outline-none focus:border-white/20"
      />
      <AiPromptChips theme="dark" onSelectPrompt={(p) => setPrompt(p)} />
    </div>
  );
}