Prompt Chips

AI chats

About

A row of clickable suggested-prompt pills for an AI chat composer that fills the input with the picked text.

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

Code

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

Usage.tsx

"use client";

import PromptChips from "@/components/ui/prompt-chips";
import * as React from "react";

const samplePrompts = [
  "Summarize this thread",
  "Draft a polite follow-up",
  "What's the delivery status?",
  "Translate to French",
];

export default function PromptChipsDemo() {
  const [lastPicked, setLastPicked] = React.useState<string | null>(null);

  return (
    <div className="flex w-full flex-col items-center gap-6 bg-background p-10 text-foreground">
      <PromptChips prompts={samplePrompts} onPick={setLastPicked} />
      {lastPicked !== null && (
        <p className="text-sm text-muted-foreground">
          Picked:{" "}
          <span className="font-medium text-foreground">{lastPicked}</span>
        </p>
      )}
    </div>
  );
}