Memory Meter

Component

About

A labeled bar that shows how full a working-memory or context window is, broken into colored segments for each thing using the space plus the room left over.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Memory Meter to your project and fits it to your theme.

Code

How Memory Meter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import MemoryMeter from "@/components/ui/memory-meter";

export default function MemoryMeterDemo() {
  return (
    <div className="w-full max-w-md rounded-lg border bg-background p-6 text-foreground">
      <MemoryMeter
        label="Context window"
        leftLabel="Room left"
        total={128000}
        segments={[
          { label: "System prompt", value: 4200 },
          { label: "Tool definitions", value: 9800 },
          { label: "Conversation history", value: 52000 },
        ]}
      />
    </div>
  );
}