nuxt-ai-content-tracker

A Nuxt module for tracking and displaying AI usage transparency in content creation.

Features

• 🔢 Weighted AI percentage calculation - Calculate AI involvement with customizable weights
• 🎨 Ready-to-use Vue components - Compact badges and detailed breakdowns
• ⚙️ Fully configurable - Customize percentages, weights, and labels
• 🌙 Dark mode support - Built-in dark mode styles
• 📦 TypeScript support - Full type definitions included

Quick Setup

Install the module:

npm install nuxt-ai-content-tracker

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-ai-content-tracker'],

  aiTransparency: {
    // Optional: customize weights
    weights: {
      research: 0.25,
      generation: 0.50,
      review: 0.25
    }
  }
})

Usage

Composable

<script setup>
const { getMethodologyAIBreakdown, getAIPercentageClass } = useAITransparency()

const methodology = {
  researchMethod: 'Hybrid',
  researchAssistants: ['Perplexity'],
  contentGeneration: 'AI-Assisted',
  generationAssistants: ['Claude'],
  articleReview: 'Human'
}

const breakdown = getMethodologyAIBreakdown(methodology)
// breakdown.averageAIPercentage = 33 (weighted average)
// breakdown.elements = [{ element: 'researchMethod', aiPercentage: 40, ... }, ...]
</script>

Components

Compact Badge

<template>
  <AitPercentageCompact
    :methodology="methodology"
    :max-assistants="2"
    :clickable="true"
    @show-details="showModal = true"
  />
</template>

Full Breakdown

<template>
  <AitPercentageBreakdown
    :methodology="methodology"
    :show-legend="true"
    :compact="false"
  />
</template>

Methodology Structure

interface ContentMethodology {
  // Research phase
  researchMethod?: 'AI' | 'DeepSearch' | 'Hybrid' | 'Human'
  researchAssistants?: ('Claude' | 'Gemini' | 'ChatGPT' | 'Perplexity' | 'Copilot')[]

  // Content generation phase
  contentGeneration?: 'AI' | 'AI-Assisted' | 'Collaborative' | 'Human'
  generationAssistants?: ('Claude' | 'Gemini' | 'ChatGPT' | 'Perplexity' | 'Copilot')[]

  // Review phase
  articleReview?: 'AI' | 'AI-Assisted' | 'Peer-Review' | 'Human'
  reviewAssistants?: ('Claude' | 'Gemini' | 'ChatGPT' | 'Perplexity' | 'Copilot')[]

  // Optional metadata
  sourcesCount?: number
  researchHours?: number
  lastUpdated?: string
}

Default AI Percentages

| Method | Value | AI % | |--------|-------|------| | Research | AI | 100% | | | DeepSearch | 60% | | | Hybrid | 40% | | | Human | 0% | | Generation | AI | 100% | | | AI-Assisted | 60% | | | Collaborative | 0% | | | Human | 0% | | Review | AI | 100% | | | AI-Assisted | 50% | | | Peer-Review | 0% | | | Human | 0% |

Configuration

export default defineNuxtConfig({
  modules: ['nuxt-ai-content-tracker'],

  aiTransparency: {
    // Weights for weighted average (must sum to 1.0)
    weights: {
      research: 0.25,    // 25% weight
      generation: 0.50,  // 50% weight (most important)
      review: 0.25       // 25% weight
    },

    // Custom AI percentages
    percentages: {
      researchMethod: {
        'AI': 100,
        'DeepSearch': 60,
        'Hybrid': 40,
        'Human': 0,
        'Custom': 50  // Add custom values
      },
      contentGeneration: {
        'AI': 100,
        'AI-Assisted': 60,
        'Collaborative': 0,
        'Human': 0
      },
      articleReview: {
        'AI': 100,
        'AI-Assisted': 50,
        'Peer-Review': 0,
        'Human': 0
      }
    },

    // Component options
    components: true,        // Auto-import components
    componentPrefix: 'Ait'   // Component prefix (AitPercentageCompact, etc.)
  }
})

API Reference

useAITransparency()

Returns an object with the following methods:

| Method | Description | |--------|-------------| | getMethodologyAIBreakdown(methodology) | Get full breakdown with weighted average | | getElementAIPercentage(element, method) | Get AI % for a single element | | getAIPercentageColor(percentage) | Get color for a percentage value | | getAIPercentageClass(percentage) | Get CSS class for a percentage value | | getMethodologyStats(methodology) | Get summary statistics | | validateMethodology(methodology) | Validate methodology, returns warnings |

Components

| Component | Props | Description | |-----------|-------|-------------| | AitPercentageCompact | methodology, maxAssistants?, clickable? | Compact inline badge | | AitPercentageBreakdown | methodology, showLegend?, compact? | Detailed breakdown view |

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the module
npm run prepack

License

MIT License © 2025 spadieri