AI Label

AI
Transparency

Visual indicator showing that content was AI-generated. Provides transparency about AI involvement with optional confidence scores and human editing indicators.

Badge Variant

Floating badge that can be positioned in corners of content areas. Hover to see details.

AI

AI-Generated Summary

This content was automatically generated by an AI model based on the provided context and requirements.

Edited

Human-Edited AI Content

This content was initially generated by AI and then reviewed and edited by a human expert.

AI

Small Badge

Smaller badge variant for compact content areas.

Edited

Large Badge

Larger badge variant for prominent content areas.

Banner Variant

Full-width banner for prominent AI disclosure at the top or bottom of content.

Inline Variant

Inline indicator for use within text flow or metadata.

Article Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

AI-generated•Published Jan 15, 2024

Edited Summary

This summary has been reviewed and refined by our editorial team to ensure accuracy and clarity.

Human-edited AI content

Icon Variant

Minimal icon-only indicator with tooltip on hover.

Small:
Medium:
Large:

Tip: Hover over the icons above to see the tooltip with detailed information.

Size Variants

Available in small, medium, and large sizes across all variants.

Badge Sizes

AI

Small

AI

Medium

AI

Large

Inline Sizes

AI-generated
AI-generated
AI-generated

Usage

How to use the AILabel component

import { AILabel } from '@/components/ui/ai-label'

// AI-generated badge (top-right)
<div className="relative">
  <AILabel
    variant="badge"
    model="GPT-4"
    timestamp={new Date('2024-01-15')}
    confidence={0.95}
    position="top-right"
    onExplain={() => console.log('Explain')}
  />
  <p>Your AI-generated content here...</p>
</div>

// Human-edited badge (top-left)
<div className="relative">
  <AILabel
    variant="badge"
    model="Claude 3.5 Sonnet"
    humanEdited={true}
    position="top-left"
  />
  <p>Your human-edited AI content here...</p>
</div>

// Banner variant
<AILabel
  variant="banner"
  model="GPT-4"
  confidence={0.92}
  onExplain={() => console.log('Explain')}
/>

// Inline in metadata
<div className="flex items-center gap-3">
  <AILabel variant="inline" size="sm" model="GPT-4" />
  <span>Published Jan 15, 2024</span>
</div>

// Icon variant with tooltip
<AILabel
  variant="icon"
  model="GPT-4"
  confidence={0.95}
/>

API Reference

Props

variant-"badge" | "banner" | "inline" | "icon" - Visual style (default: "badge")
size-"sm" | "md" | "lg" - Size of the label (default: "md")
humanEdited-boolean - Indicates if AI content was edited by a human (default: false)
model-string - Name of the AI model used (default: "AI Model")
timestamp-Date - When the content was generated
confidence-number - Confidence score (0-1) of the AI generation
position-"top-right" | "top-left" | "bottom-right" | "bottom-left" - Position for badge variant
onExplain-() => void - Callback when user wants more details
showTooltip-boolean - Control tooltip visibility (badge/icon variants)

Features

  • Four variants: badge, banner, inline, icon
  • Three sizes: sm, md, lg
  • AI transparency indicators
  • Human editing indicator
  • Confidence score display
  • Hover tooltips with details
  • Accessible and WCAG compliant