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

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/context.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/context

Examples

Usage with AI SDK

No messages yet. Start the conversation by typing a prompt above.

Props

Context

Name	Type	Default
`usedTokens`	`number`
`maxTokens`	`number`
`usage`	`LanguageModelUsage`
`modelId`	`string`
`closeDelay`	`number`	`0`
`openDelay`	`number`	`0`
`children`	`Snippet`

ContextTrigger

Name	Type	Default
`variant`	`'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'`	`'ghost'`
`size`	`'default' \| 'sm' \| 'lg' \| 'icon'`
`children`	`Snippet`

ContextContent

Name	Type	Default
`class`	`string`
`children`	`Snippet`

ContextContentHeader

Name	Type	Default
`class`	`string`
`children`	`Snippet`

ContextContentBody

Name	Type	Default
`class`	`string`
`children`	`Snippet`

ContextContentFooter

Name	Type	Default
`class`	`string`
`children`	`Snippet`

ContextInputUsage

Name	Type	Default
`class`	`string`
`children`	`Snippet`

ContextOutputUsage

Name	Type	Default
`class`	`string`
`children`	`Snippet`

ContextReasoningUsage

Name	Type	Default
`class`	`string`
`children`	`Snippet`

ContextCacheUsage

Name	Type	Default
`class`	`string`
`children`	`Snippet`