Citation Card

Inline citation card linking to source material with title and snippet. Rendered inside message bubbles when the AI provides source references.

Preview

Preview
According to recent research, Flutter is used by over 1 million apps.
🔗 Flutter Growth Report 2025
🔗 Google I/O Flutter Update

Installation

$ flai add citation_card

Import

import 'package:my_app/flai/components/citation_card/citation_card.dart';

Usage

// Inside a message with citations
MessageBubble(
  message: Message(
    id: '1',
    role: MessageRole.assistant,
    content: 'According to the Flutter docs...',
    timestamp: DateTime.now(),
    citations: [
      Citation(
        title: 'Flutter Widget Catalog',
        url: 'https://flutter.dev/docs/development/ui/widgets',
        snippet: 'A catalog of commonly used Flutter widgets...',
      ),
      Citation(
        title: 'State Management',
        url: 'https://flutter.dev/docs/development/data-and-backend/state-mgmt',
      ),
    ],
  ),
  onTapCitation: (citation) {
    launchUrl(Uri.parse(citation.url!));
  },
)

// Standalone citation card
FlaiCitationCard(
  citation: Citation(
    title: 'Dart Language Tour',
    url: 'https://dart.dev/language',
    snippet: 'A comprehensive guide to the Dart language.',
  ),
  onTap: () {
    // Open URL
  },
)

Properties

PropertyTypeDefaultDescription
citation Citation required The citation data to display.
onTap VoidCallback? null Called when the citation card is tapped.

Citation Model

class Citation {
  final String title;      // Source title (required)
  final String? url;       // Source URL
  final String? snippet;   // Preview text snippet
}