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

PropTypeDefaultDescription
`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 Session
3 turns
Session Cost
$0.0042
Tokens Used
1,450