Token Counter
<mcp-token-counter>Token usage counter with visual progress indicator and warning states.
AIWeb Component
Overview
Token usage counter with visual progress indicator and warning states.
Preview
Preview
Loading components...
Import
javascript
// Import all components (recommended)
import '@mcpsystem/ui';
// Or import the class for TypeScript
import { McpTokenCounter } from '@mcpsystem/ui';Basic Usage
html
<mcp-token-counter used="3500" limit="4096"></mcp-token-counter>API Reference
Properties(5)
| Property | Attribute | Type |
|---|---|---|
used | used | number |
limit | limit | number |
showLabel | show-label | boolean |
variant | variant | 'default' | 'compact' |
warningThreshold | warning-threshold | number |
Events(2)
| Event | Detail |
|---|---|
mcp-limit-warning | { used, limit, percentage } |
mcp-limit-exceeded | { used, limit, percentage } |
CSS Parts(4)
Style internal elements using ::part() selector.
| Part | Description |
|---|---|
::part(container) | The outer container |
::part(bar) | The progress bar track |
::part(bar-fill) | The progress bar fill |
::part(label) | The text label |
CSS Custom Properties(5)
Customize appearance by setting these CSS variables.
| Property | Description |
|---|---|
--mcp-token-bar-bg | Progress bar background |
--mcp-token-bar-fill | Progress bar fill color |
--mcp-token-bar-height | Progress bar height |
--mcp-token-warning | Warning state color |
--mcp-token-error | Error/exceeded state color |
Examples
Basic Usage
Preview
Loading components...
html
<mcp-token-counter used="3500" limit="4096"></mcp-token-counter>With Label
Preview
Loading components...
html
<mcp-token-counter used="100000" limit="128000" show-label></mcp-token-counter>Handle Warning
Preview
Loading components...
html
<mcp-token-counter id="counter" used="0" limit="4096"></mcp-token-counter>
<script>
document.getElementById('counter').addEventListener('mcp-limit-warning', (e) => {
console.log('Warning:', e.detail.percentage + '% used');
});
</script>