Documentation/React Suite/<VibezSessionWidget />

<VibezSessionWidget />

Floating real-time session counter widget with zero database lag.


`<VibezSessionWidget />`

A lightweight, floating telemetry badge that shows your users their live token usage, dollar spend, and multi-turn message counts in real time.

Adding to Your App

tsx
400 font-semibold">class="text-emerald-400">'use client';
400 font-semibold">import { VibezSessionProvider, VibezSessionWidget } 400 font-semibold">from 400 font-semibold">class="text-emerald-400">'400 font-semibold">vibezcheck/react';
 
400 font-semibold">export 400 font-semibold">default 400 font-semibold">function RootLayout({ children }: { children: React.ReactNode }) {
400 font-semibold">return (
{children}
{/* Floating telemetry widget in bottom right */}
400 font-semibold">class="text-emerald-400">"light" position=400 font-semibold">class="text-emerald-400">"bottom-right" />
);
}

Available Props

PropTypeDefaultDescription
`theme``'light''dark''auto'``'auto'`Visual color theme
`position``'bottom-right''bottom-left''top-right''top-left'``'bottom-right'`Corner placement
`showCost``boolean``true`Display USD dollar cost
`showTokens``boolean``true`Display total token count
Interactive Component Sandbox

Live Session Telemetry Preview

Look at the floating card below to inspect the real-time <VibezSessionWidget />!

Active Session
3 turns
Session Cost
$0.0042
Tokens Used
1,450