Documentation/React Suite/<VibezSessionWidget />
<VibezSessionWidget />
Floating live token and dollar counter widget with zero database lag.
`<VibezSessionWidget />`
A floating real-time telemetry card that displays active session tokens, USD inference cost, and multi-turn request counts.
---
Usage
tsx
'use client';
import { VibezSessionProvider, VibezSessionWidget } from 'vibezcheck/react';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<VibezSessionProvider>
{children}
{/* Floating telemetry widget */}
<VibezSessionWidget theme="light" position="bottom-right" />
</VibezSessionProvider>
);
}---
Props
| Prop | Type | Default | Description | |||
| `theme` | `'light' | 'dark' | 'auto'` | `'auto'` | Visual theme | |
| `position` | `'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'` | `'bottom-right'` | Screen corner anchor |
| `collapsed` | `boolean` | `false` | Initial collapsed state | |||
| `showCost` | `boolean` | `true` | Display USD cost metric | |||
| `showTokens` | `boolean` | `true` | Display total token metric |
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