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.

State

12 pedidos sem aprovação

warning

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 taw-ui add alert-card

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"
import { createReceipt } from "taw-ui"

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

warning

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

Em aberto12
Valor totalR$ 45.200
Mais antigo7 dias
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
Logistics API· 30 min ago
Entregas programadas para o turno da manhã. Equipe de recebimento já foi notificada.
Horários de entrega são estimativas do transportador

12 pedidos sem aprovação

warning

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

Em aberto12
Valor totalR$ 45.200
Mais antigo7 dias
Order Monitor· live
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

Risco de ruptura de estoque

critical

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

Produtos críticos3
LojaPalmas
Impacto estimadoR$ 28.000
Stock Monitor· live
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

Props

FieldTypeDescription
part*TawToolPartTool 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