1

AI Copy Button

Split button with a primary copy action and a dropdown of AI destinations. Copy content, view as markdown, or open in v0, ChatGPT, Claude, or Gemini.

radix-uilucide-reactclass-variance-authority

Preview

Installation

$ shadcn add https://ui.justinlevine.me/r/ai-copy-button.json

Usage

import { AiCopyButton } from "@/components/ai-copy-button"
<AiCopyButton value={pageContent} label="Copy Page" />

Examples

Variants

Default

Secondary

Outline

Ghost

Primary

Sizes

Small

Default

Large

Custom labels

Copy Page

Copy Code

Brand colors

Brand Colors

Brand Colors + Outline

Brand Colors + Copy Page

Brand Colors + Primary

Selective targets

v0 + Claude only

All AI targets

API Reference

AiCopyButton

PropType

AiTarget (custom target)

PropType

Notes

  • Client component. Uses the Clipboard API and Radix DropdownMenu for keyboard navigation, focus management, and screen reader support.
  • Built-in targets. Five built-in targets are included: Markdown, v0, ChatGPT, Claude, and Gemini. Pass a subset to show only what you need.
  • Custom targets. Add your own targets with a custom AiTarget object — bring your own icon and action.