Context
The Context component provides a comprehensive view of AI model usage through a compound component system. It displays context window utilization, token consumption breakdown (input, output, reasoning, cache), and cost estimation in an interactive hover card interface.
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Props
Context
| Prop | Type | Default | Description |
|---|---|---|---|
usedTokens | number | - | Number of tokens currently used |
maxTokens | number | - | Maximum number of tokens allowed |
usage | LanguageModelUsage | - | Detailed token usage breakdown (input, output, reasoning, cached) |
modelId | string | - | Model identifier for cost estimation |
closeDelay | number | 0 | Delay in milliseconds before closing the hover card |
openDelay | number | 0 | Delay in milliseconds before opening the hover card |
children | Snippet | - | Child components (typically ContextTrigger and ContextContent) |
ContextTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'ghost' | Button variant style |
size | 'default' | 'sm' | 'lg' | 'icon' | - | Button size |
children | Snippet | - | Custom trigger content (defaults to percentage display with icon) |
ContextContent
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the content container |
children | Snippet | - | Content to display in the hover card (typically header, body, footer) |
ContextContentHeader
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the header |
children | Snippet | - | Custom header content (defaults to percentage and token count display) |
ContextContentBody
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the body |
children | Snippet | - | Body content (typically usage breakdown components) |
ContextContentFooter
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the footer |
children | Snippet | - | Custom footer content (defaults to total cost display) |
ContextInputUsage
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the input usage display |
children | Snippet | - | Custom content for input token usage display |
ContextOutputUsage
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the output usage display |
children | Snippet | - | Custom content for output token usage display |
ContextReasoningUsage
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the reasoning usage display |
children | Snippet | - | Custom content for reasoning token usage display |
ContextCacheUsage
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the cache usage display |
children | Snippet | - | Custom content for cache token usage display |