Overview

A compound component for visualizing AI response latency with color-coded performance indicators. Shows time to first byte (TTFB) and total duration with animated progress bars. Supports compact (inline badge) and expanded (full bar chart) variants.

Installation

bunx shadcn@latest add @elements/latency-meter

Usage

import {
  LatencyMeter,
  LatencyMeterBar,
  LatencyMeterStats,
} from "@/components/elements/ai-elements/devtools/latency-meter";

export function LatencyMeterExample() {
  return (
    <LatencyMeter ttfb={450} total={2100} status="complete">
      <LatencyMeterBar />
      <LatencyMeterStats />
    </LatencyMeter>
  );
}

Props

LatencyMeter

Performance Levels

// Color coding based on total duration
const levels = {
  fast: total < 1000,     // Green
  moderate: total < 3000, // Yellow
  slow: total >= 3000,    // Red
};

Features

• Visual progress bar showing TTFB vs streaming time
• Color-coded performance indicators (fast/moderate/slow)
• Compact inline badge variant for tight spaces
• Expanded bar chart variant with detailed breakdown
• Loading animation during active requests
• TTFB and total duration display