taw-ui
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.

Theme
State
Recommended

Oversized Logo Hoodie — Restock Analysis

SKU HOODIE-BLK-L · Black / Large

Stock Left
34units
Weekly Sales
89units/wk
Days of Stock
2.7days
Sell-Through
94%

Installation

Terminal
npx shadcn@latest add "https://taw-ui.com/r/insight-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 { 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 { ToolPart } from "@/components/taw/lib/types"

function ToolOutput({ part }: { part: ToolPart }) {
  // 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%
Recommended

Artist Collab Tee — Launch Performance

Summer '25 Collection · 48h post-drop

Strong launch — outperforming your last 3 collabs by 40%. Consider extending the drop window by 48 hours to capture late demand.
Units Sold
1247units
Revenue
$49.9K
Conv. Rate
8.4%
Returns
1.2%

The 8.4% conversion rate is 3x your store average. Social mentions peaked at 2.1K in the first 12 hours. Return rate of 1.2% suggests accurate sizing and satisfied customers.

Shopify Analytics· 2 hours ago
negative
89%
Attention Needed

Utility Jogger — Return Rate Alert

SKU JOGGER-GRY-S · Grey / Small

Pause advertising on this SKU and investigate sizing. Return rate is 4.4x your store average — most complaints mention the Small running too tight.
Return Rate
18.5%
Avg Return Rate
4.2%
Complaints
23tickets
NPS Impact
-12

23 support tickets in 2 weeks, 19 of which mention sizing issues specifically for Small. The Grey/Small variant has a 18.5% return rate vs 3.8% for Grey/Medium. This suggests a manufacturing defect in this size run, not a design issue.

Returns are still within the 30-day window. Final return rate may be higher once all eligible returns are processed.
Shopify + Zendesk· live

Props

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