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.
12 pedidos sem aprovação
warningHá pedidos em aberto há mais de 5 dias nas lojas Palmas e Porto Nacional.
Installation
npx taw-ui add alert-cardThis copies the component source and schema into your project. You own the code — customize anything.
Usage
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" },
}
},
})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
warningHá pedidos em aberto há mais de 5 dias nas lojas Palmas e Porto Nacional.
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
infoFornecedores confirmaram entrega de 3 pedidos para as lojas Palmas e Gurupi.
12 pedidos sem aprovação
warningHá pedidos em aberto há mais de 5 dias nas lojas Palmas e Porto Nacional.
Risco de ruptura de estoque
critical3 produtos na loja Palmas estão com estoque abaixo de 1 semana de cobertura.
Props
| Field | Type | Description |
|---|---|---|
| part* | TawToolPart | Tool call lifecycle state |
| onAction | (id, payload) => void | Callback when an action button is clicked |
| receipt | TawReceipt | Renders the receipt state when provided |
| pending | boolean | Disables all actions while processing |
| animate | boolean | Enable entrance animations (default: true) |
| className | string | Additional CSS classes |
Schema
| Field | Type | Description |
|---|---|---|
| id* | string | Stable identifier |
| severity* | "info" | "warning" | "critical" | Visual severity level |
| title* | string | Alert heading |
| description | string | Detail text below the title |
| metrics | Metric[] | Up to 6 inline key-value metrics |
| actions | Action[] | Up to 4 action buttons |
| reasoning | string | AI explanation |
| caveat | string | Uncertainty note |
| source | Source | Data provenance |
| Field | Type | Description |
|---|---|---|
| id* | string | Action identifier (passed to onAction) |
| label* | string | Button text |
| primary | boolean | Renders as a filled accent button |
| Field | Type | Description |
|---|---|---|
| label* | string | Metric label |
| value* | string | number | Metric value |
Features
Info (accent), warning (amber), critical (red) with matching icons
Up to 6 key numbers displayed in a compact row
Up to 4 actions with primary/secondary styling and receipt pattern
Collapses to a compact summary after the user acts
Optional typewriter-animated explanation
Shows which monitoring system generated the alert