Add a Carbon Badge in 5 Minutes

Copy this component into your project. It calls the v2 API after every AI response and renders a compact carbon badge.

'use client';
import { useEffect, useState } from 'react';

interface BadgeData {
  energy_kwh: number;
  carbon_gco2e: number;
  water: { liters: number; stress_level: string };
}

export default function CarbonBadge({
  model = 'gpt-4o',
  tokens,
  region = 'global-avg',
  apiKey,
}: {
  model?: string;
  tokens: number;
  region?: string;
  apiKey: string;
}) {
  const [data, setData] = useState<BadgeData | null>(null);

  useEffect(() => {
    if (!tokens || tokens <= 0) return;
    fetch('https://aiimpactcalculator.com/api/v2/calculate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${apiKey}`,
      },
      body: JSON.stringify({ model, tokens, region }),
    })
      .then(r => r.json())
      .then(setData)
      .catch(console.error);
  }, [model, tokens, region, apiKey]);

  if (!data) return null;

  const stressColor: Record<string, string> = {
    low: '#22c55e', moderate: '#eab308',
    high: '#f97316', critical: '#ef4444',
  };

  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      background: '#f8fafc', border: '1px solid #e2e8f0',
      borderRadius: 10, padding: '8px 14px', fontFamily: 'system-ui',
      fontSize: 13, color: '#334155',
    }}>
      <span title="Energy">
        &#9889; {data.energy_kwh.toFixed(4)} kWh
      </span>
      <span style={{ color: '#94a3b8' }}>|</span>
      <span title="Carbon">
        &#127758; {data.carbon_gco2e.toFixed(1)}g CO2
      </span>
      <span style={{ color: '#94a3b8' }}>|</span>
      <span title={`Water stress: ${data.water.stress_level}`}>
        &#128167; {data.water.liters.toFixed(2)}L
        <span style={{
          background: stressColor[data.water.stress_level] ?? '#94a3b8',
          color: '#fff', fontSize: 10, fontWeight: 700,
          padding: '1px 5px', borderRadius: 6, marginLeft: 4,
        }}>
          {data.water.stress_level}
        </span>
      </span>
    </div>
  );
}

import CarbonBadge from './CarbonBadge';

// After your AI call completes:
<CarbonBadge
  model="gpt-4o"
  tokens={usage.total_tokens}
  region="us-east-virginia"
  apiKey={process.env.NEXT_PUBLIC_AIC_KEY!}
/>

The badge auto-updates every time tokens changes. It renders inline and adapts to your layout.

Drop a single <script> tag into any HTML page. No framework needed. Works with WordPress, Webflow, static sites, or any webpage.

<div id="aic-badge"></div>
<script
  src="https://aiimpactcalculator.com/widget.js"
  data-model="gpt-4o"
  data-tokens="5000"
  data-region="us-east-virginia"
  data-key="YOUR_API_KEY"
></script>

// After each AI response, update the badge:
window.AICBadge.update({
  model: 'gpt-4o',
  tokens: totalTokensUsed,
  region: 'us-east-virginia',
});

Attributes