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.
Roundup Original 20L
Porto Nacional · Pedido #342
Installation
npx taw-ui add insight-cardThis copies the component source and schema into your project. You own the code — customize anything.
Usage
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" },
}
},
})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.
Fertilizante NPK 20-05-20
Palmas · Pedido #501
Herbicida Glifosato 5L
Gurupi · Pedido #612
Props
| Field | Type | Description |
|---|---|---|
| part* | TawToolPart | Tool call lifecycle state — handles loading, error, and success |
| animate | boolean | Enable entrance animations and metric hover (default: true) |
| className | string | Additional CSS classes on the wrapper |
Schema
| Field | Type | Description |
|---|---|---|
| id* | string | Stable identifier |
| title* | string | Main heading (e.g. product name) |
| subtitle | string | Context line (e.g. store + order number) |
| metrics* | Metric[] | 1-8 key metrics to display |
| recommendation | string | Human-readable recommendation |
| sentiment | "positive" | "caution" | "negative" | Visual treatment for recommendation (default: "caution") |
| reasoning | string | AI explanation of the analysis |
| confidence | number (0-1) | AI confidence in this analysis |
| caveat | string | Uncertainty note |
| source | Source | Data provenance |
| Field | Type | Description |
|---|---|---|
| label* | string | Metric name |
| value* | string | number | Metric value (numbers are auto-formatted) |
| unit | string | Unit suffix (e.g. "un", "months") |
| status | "good" | "warning" | "critical" | Color-codes the value |
Features
Up to 8 key metrics in a responsive grid with status coloring
Positive (green), caution (amber), negative (red) with SVG icon
Typewriter-animated explanation of the analysis
Per-metric status dots — good, warning, critical
AI certainty badge and human-readable uncertainty note
Sentiment-colored left border for instant visual signal