taw-ui
Interactive

AlertCard

Proactive AI notification with severity levels, inline metrics, and action buttons. The component for when the AI speaks first — surfacing issues before the user asks.

Theme
State

12 pedidos sem aprovação

Atenção

Há pedidos em aberto há mais de 5 dias nas lojas Palmas e Porto Nacional.

Em aberto12
Valor totalR$ 45.200
Mais antigo7 dias

Installation

Terminal
npx shadcn@latest add "https://taw-ui.com/r/alert-card.json"

This copies the component source and schema into your project. You own the code — customize anything.

Usage

server — define tool
import { tool } from "ai"
import { AlertCardSchema } from "@/components/taw/alert-card"

export const checkAlerts = tool({
  description: "Check for proactive alerts",
  parameters: z.object({}),
  outputSchema: AlertCardSchema,
  execute: async () => {
    const alerts = await monitoringService.check()
    return {
      id: "alert-stockout",
      severity: "critical",
      title: "Stock risk detected",
      description: "3 products are below 1 week of coverage",
      metrics: [
        { label: "Critical", value: 3 },
        { label: "Impact", value: "R$ 28.000" },
      ],
      actions: [
        { id: "create-orders", label: "Create orders", primary: true },
        { id: "dismiss", label: "Dismiss" },
      ],
      source: { label: "Stock Monitor", freshness: "live" },
    }
  },
})
client — render
import { AlertCard } from "@/components/taw/alert-card"

function ToolOutput({ part }) {
  const [receipt, setReceipt] = useState()

  const handleAction = (id, payload) => {
    if (payload.receipt) setReceipt(payload.receipt)
    // Execute the chosen action
    await executeAction(id)
  }

  return (
    <AlertCard
      part={part}
      onAction={handleAction}
      receipt={receipt}
    />
  )
}

Try It

Click an action button to see the receipt pattern.

12 pedidos sem aprovação

Atenção

Há pedidos em aberto há mais de 5 dias nas lojas Palmas e Porto Nacional.

Em aberto12
Valor totalR$ 45.200
Mais antigo7 dias

Pedidos parados há mais de 5 dias podem impactar o abastecimento das lojas no período de safra.

Order Monitor· live

Severity Levels

Each severity level has its own color, icon, and left border. The AI chooses the severity — the UI adapts automatically.

3 entregas previstas para hoje

Info

Fornecedores confirmaram entrega de 3 pedidos para as lojas Palmas e Gurupi.

Pedidos3
Itens47

Entregas programadas para o turno da manhã. Equipe de recebimento já foi notificada.

Horários de entrega são estimativas do transportador
Logistics API· 30 min ago

12 pedidos sem aprovação

Atenção

Há pedidos em aberto há mais de 5 dias nas lojas Palmas e Porto Nacional.

Em aberto12
Valor totalR$ 45.200
Mais antigo7 dias

Pedidos parados há mais de 5 dias podem impactar o abastecimento das lojas no período de safra.

Alguns pedidos podem estar aguardando aprovação de crédito do cliente
Order Monitor· live

Risco de ruptura de estoque

Crítico

3 produtos na loja Palmas estão com estoque abaixo de 1 semana de cobertura.

Produtos críticos3
LojaPalmas
Impacto estimadoR$ 28.000

Produtos com cobertura inferior a 1 semana têm 85% de chance de ruptura antes da próxima entrega programada.

Há uma entrega do fornecedor prevista para sexta — pode reduzir a urgência
Stock Monitor· live

Props

FieldTypeDescription
part*ToolPartTool call lifecycle state
onAction(id, payload) => voidCallback when an action button is clicked
receiptTawReceiptRenders the receipt state when provided
pendingbooleanDisables all actions while processing
animatebooleanEnable entrance animations (default: true)
classNamestringAdditional CSS classes

Schema

AlertCardSchema
FieldTypeDescription
id*stringStable identifier
severity*"info" | "warning" | "critical"Visual severity level
title*stringAlert heading
descriptionstringDetail text below the title
metricsMetric[]Up to 6 inline key-value metrics
actionsAction[]Up to 4 action buttons
reasoningstringAI explanation
caveatstringUncertainty note
sourceSourceData provenance
Action
FieldTypeDescription
id*stringAction identifier (passed to onAction)
label*stringButton text
primarybooleanRenders as a filled accent button
Metric
FieldTypeDescription
label*stringMetric label
value*string | numberMetric value

Features

Three severity levels

Info (accent), warning (amber), critical (red) with matching icons

Inline metrics

Up to 6 key numbers displayed in a compact row

Action buttons

Up to 4 actions with primary/secondary styling and receipt pattern

Receipt pattern

Collapses to a compact summary after the user acts

AI reasoning

Optional typewriter-animated explanation

Source attribution

Shows which monitoring system generated the alert

Related