Ai Context Meter

Displays the context usage of an AI model, showing token distribution and compacting strategies.

Installation

terminal

pnpm dlx layro-cli add @kokonut-labs/ai-context-meter

npx layro-cli add @kokonut-labs/ai-context-meter

npx layro-cli add @kokonut-labs/ai-context-meter

bunx layro-cli add @kokonut-labs/ai-context-meter

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

/**
 * @author: @kokonutui
 * @description: AI Context Meter
 * @version: 1.0.0
 * @date: 2026-10-15
 * @license: MIT
 * @website: https://kokonutui.com
 * @github: https://github.com/kokonut-labs/kokonutui
 */

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { useCallback, useEffect, useId, useRef, useState } from "react";