Context

Display model context usage and cost estimation.

"use client"

import {
  Context,
  ContextContent,
  ContextContentHeader,
  ContextTrigger,
} from "@/components/ai-elements/context"

export function ContextDemo() {
  const usage = {
    promptTokens: 2500,
    completionTokens: 1000,
    totalTokens: 3500,
  }

  return (
    <div className="flex items-center justify-center">
      <Context
        maxTokens={128000}
        modelId="gpt-4o-mini"
        usage={usage}
        usedTokens={usage.totalTokens}
      >
        <ContextTrigger />
        <ContextContent>
          <ContextContentHeader />
        </ContextContent>
      </Context>
    </div>
  )
}

Installation

CLI

Manual


pnpm
npm
yarn
bun
pnpm dlx shadcn@latest add context

Usage

import {
  Context,
  ContextTrigger,
  ContextContent,
  ContextContentHeader,
  ContextContentTokens,
  ContextContentCost,
} from "@/components/ai-elements/context"

<Context
  usedTokens={3500}
  maxTokens={128000}
  modelId="gpt-4o-mini"
  usage={{ promptTokens: 2500, completionTokens: 1000, totalTokens: 3500 }}
>
  <ContextTrigger />
  <ContextContent>
    <ContextContentHeader />
    <ContextContentTokens />
    <ContextContentCost />
  </ContextContent>
</Context>

Examples

Default

"use client"

import {
  Context,
  ContextContent,
  ContextContentHeader,
  ContextTrigger,
} from "@/components/ai-elements/context"

export function ContextDemo() {
  const usage = {
    promptTokens: 2500,
    completionTokens: 1000,
    totalTokens: 3500,
  }

  return (
    <div className="flex items-center justify-center">
      <Context
        maxTokens={128000}
        modelId="gpt-4o-mini"
        usage={usage}
        usedTokens={usage.totalTokens}
      >
        <ContextTrigger />
        <ContextContent>
          <ContextContentHeader />
        </ContextContent>
      </Context>
    </div>
  )
}

"use client"
 
export default function Example() {
  const usage = {
    promptTokens: 2500,
    completionTokens: 1000,
    totalTokens: 3500,
  }
 
  return (
    <Context
      maxTokens={128000}
      modelId="gpt-4o-mini"
      usage={usage}
      usedTokens={usage.totalTokens}
    >
      <ContextTrigger />
      <ContextContent>
        <ContextContentHeader />
        <ContextContentTokens />
        <ContextContentCost />
      </ContextContent>
    </Context>
  )
}

Features

Token Tracking: Displays current token usage
Progress Indicator: Visual representation of context usage
Cost Estimation: Calculates estimated cost using tokenlens
Model Info: Shows current model information

API Reference

Context

Main context container.

Prop	Type	Default	Description
`usedTokens`	`number`	-	Current token usage
`maxTokens`	`number`	-	Maximum context window
`usage`	`LanguageModelUsage`	-	Detailed token usage
`modelId`	`ModelId`	-	Model identifier for cost calculation

ContextTrigger

Trigger button with usage percentage.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Custom trigger content

ContextContent

Hover card content.

Prop	Type	Default	Description
`className`	`string`	-	Custom CSS classes

ContextContentHeader

Header with usage summary.

Prop	Type	Default	Description
`className`	`string`	-	Custom CSS classes

ContextContentTokens

Token usage breakdown.

Prop	Type	Default	Description
`className`	`string`	-	Custom CSS classes

ContextContentCost

Cost estimation display.

Prop	Type	Default	Description
`className`	`string`	-	Custom CSS classes

Code Block Conversation

On This Page

Installation Usage Examples Default Features API Reference Context ContextTrigger ContextContent ContextContentHeader ContextContentTokens ContextContentCost