Prompt Suggestion

A button-based component for displaying prompt suggestions in AI interfaces. It renders standard buttons or highlighted text based on provided props. It switches between normal and highlight modes depending on the presence of a highlight string. Use it to offer interactive suggestions in AI-driven applications.

byJulien Thibeaut from Prompt Kit

Installation

terminal

pnpm dlx layro-cli add @ibelick/prompt-suggestion

npx layro-cli add @ibelick/prompt-suggestion

npx layro-cli add @ibelick/prompt-suggestion

bunx layro-cli add @ibelick/prompt-suggestion

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client"

import { Button, buttonVariants } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { VariantProps } from "class-variance-authority"

export type PromptSuggestionProps = {
  children: React.ReactNode
  variant?: VariantProps<typeof buttonVariants>["variant"]
  size?: VariantProps<typeof buttonVariants>["size"]
  className?: string
  highlight?: string
} & React.ButtonHTMLAttributes<HTMLButtonElement>