Display

InsightCard

Structured AI analysis with key metrics, a sentiment-coded recommendation, and reasoning. The component every analysis tool needs — turns raw data into an actionable insight.

State
87%

Roundup Original 20L

Porto Nacional · Pedido #342

Estoque Atual
120un
Venda Mensal
85un/mês
Cobertura
1.4meses
Tendência
Alta

Installation

Terminal
npx taw-ui add insight-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 { InsightCardSchema } from "@/components/taw/insight-card"

export const analyzeOrder = tool({
  description: "Analyze an order item",
  parameters: z.object({ orderNumber: z.number() }),
  outputSchema: InsightCardSchema,
  execute: async ({ orderNumber }) => {
    const order = await getOrder(orderNumber)
    const sales = await getSalesHistory(order.productId)
    const coverage = order.stock / sales.avgMonthly

    return {
      id: `analysis-${orderNumber}`,
      title: order.productName,
      subtitle: `${order.storeName} · #${orderNumber}`,
      metrics: [
        { label: "Stock", value: order.stock, unit: "un" },
        { label: "Monthly Sales", value: sales.avgMonthly },
        { label: "Coverage", value: +coverage.toFixed(1), unit: "months",
          status: coverage < 1 ? "critical" : "good" },
      ],
      recommendation: "Approve — stock is critically low",
      sentiment: "positive",
      confidence: 0.87,
      source: { label: "Siagri", freshness: "live" },
    }
  },
})
client — render
import { InsightCard } from "@/components/taw/insight-card"
import type { TawToolPart } from "taw-ui"

function ToolOutput({ part }: { part: TawToolPart }) {
  // Handles loading, error, and success states
  return <InsightCard part={part} />
}

Sentiment

The sentiment field controls the recommendation's visual treatment — color, icon, and accent border. It tells the user at a glance whether the AI's judgment is favorable, cautious, or negative.

positive
95%

Fertilizante NPK 20-05-20

Palmas · Pedido #501

Estoque Atual
45un
Venda Mensal
180un/mês
Cobertura
0.25meses
Tendência
Estável
Aprovar — estoque crítico com menos de 1 semana de cobertura
Estoque atual cobre apenas 7 dias de vendas. Quantidade solicitada de 400 unidades fornece 2,5 meses de cobertura, dentro da faixa ideal.
Preço do fornecedor pode variar — cotação válida até sexta-feira
Siagri· live
negative
91%

Herbicida Glifosato 5L

Gurupi · Pedido #612

Estoque Atual
580un
Venda Mensal
45un/mês
Cobertura
12.9meses
Tendência
Queda
Rejeitar — estoque já cobre 12,9 meses com tendência de queda nas vendas
A loja Gurupi já tem excesso de estoque. Considere transferir 200 unidades para Porto Nacional onde há demanda.
Tendência de queda pode ser sazonal — verificar histórico do mesmo período no ano anterior
Siagri + Sales History· live

Props

FieldTypeDescription
part*TawToolPartTool call lifecycle state — handles loading, error, and success
animatebooleanEnable entrance animations and metric hover (default: true)
classNamestringAdditional CSS classes on the wrapper

Schema

InsightCardSchema
FieldTypeDescription
id*stringStable identifier
title*stringMain heading (e.g. product name)
subtitlestringContext line (e.g. store + order number)
metrics*Metric[]1-8 key metrics to display
recommendationstringHuman-readable recommendation
sentiment"positive" | "caution" | "negative"Visual treatment for recommendation (default: "caution")
reasoningstringAI explanation of the analysis
confidencenumber (0-1)AI confidence in this analysis
caveatstringUncertainty note
sourceSourceData provenance
Metric
FieldTypeDescription
label*stringMetric name
value*string | numberMetric value (numbers are auto-formatted)
unitstringUnit suffix (e.g. "un", "months")
status"good" | "warning" | "critical"Color-codes the value

Features

Metrics grid

Up to 8 key metrics in a responsive grid with status coloring

Sentiment-coded recommendation

Positive (green), caution (amber), negative (red) with SVG icon

AI reasoning

Typewriter-animated explanation of the analysis

Status indicators

Per-metric status dots — good, warning, critical

Confidence + caveat

AI certainty badge and human-readable uncertainty note

Accent strip

Sentiment-colored left border for instant visual signal

Related