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
| Prop | Type | Default | Description | |||
| `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 SessionSession Cost
$0.0042
Tokens Used
1,450