Todos los componentes (244)
Consumo de IA
IA · AIUsageDashboard
Qué es y cuándo usarlo
El consumo de IA de una cuenta: coste, tokens de entrada y de salida (con lo servido desde la caché), el coste de cada día por modelo, el desglose por modelo y los topes con aviso.
Cuándo usarlo
- La pantalla de facturación o de uso de un producto con IA.
recordslleva un registro por día y modelo:date,model,inputTokens,outputTokens,cachedTokensycosten la moneda decurrency.- Se elige el periodo (7 o 30 días, o todo), contado hacia atrás desde el último día con datos para que el servidor y el navegador pinten lo mismo.
limitspone una barra por tope (coste o tokens) que avisa al 80 % y al pasarse.
Cuándo no
- Una cifra suelta junto a un mensaje:
UsageBadge. - Solo pinta lo que recibe: cortar el servicio al pasar un tope es cosa del servidor.
Teclado: el periodo es un grupo de radio (flechas); el resto se lee.
Accesibilidad: la gráfica lleva su tabla para el lector de pantalla, el desglose es una tabla con cabeceras de fila y los avisos de tope van escritos.
Aspecto fino: las cifras de la tabla van alineadas a la derecha con números de ancho fijo.
Cómo se ve
Coste
32,40 €
Tokens de entrada
2,4 M
90 mil desde la caché
Tokens de salida
481 mil
- claude-opus
- claude-sonnet
- claude-haiku
| Día | claude-opus | claude-sonnet | claude-haiku |
|---|---|---|---|
| 26 oct | 6,80 € | 0,00 € | 0,00 € |
| 27 oct | 8,90 € | 0,00 € | 1,40 € |
| 28 oct | 0,00 € | 3,20 € | 0,00 € |
| 29 oct | 7,50 € | 0,00 € | 0,00 € |
| 30 oct | 0,00 € | 0,00 € | 1,70 € |
| 31 oct | 0,00 € | 2,90 € | 0,00 € |
| Modelo | Tokens de entrada | Tokens de salida | Coste | Parte del coste |
|---|---|---|---|---|
| claude-opus | 627 mil | 140 mil | 23,20 € | 72 % |
| claude-sonnet | 620 mil | 135 mil | 6,10 € | 19 % |
| claude-haiku | 1,1 M | 206 mil | 3,10 € | 10 % |
<AIUsageDashboard
label="Consumo de IA"
records={registros}
currency="EUR"
limits={{ cost: 40 }}
defaultPeriod="all"
/>Props
Se importa con import { AIUsageDashboard } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
labelobligatoria | string | Que consumo es («Consumo de IA de Acme»). Obligatorio. |
recordsobligatoria | readonly UsageRecord[] | Un registro por dia y modelo. Los periodos se cuentan desde el ultimo dia con datos. |
className | string | Se une a las clases de la biblioteca, no las sustituye. |
currency | string | La moneda del coste, en ISO 4217. Por defecto, euros. |
defaultPeriod | UsagePeriod | — |
limits | UsageLimits | Los topes del periodo elegido: sale una barra con aviso al 80 % y al pasarse. |
Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.
En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: