Guide
Quick Start
One command. Your code. Full ownership.
terminal
npm i taw-ui
npx taw-ui add kpi-cardserver.ts — define tool
import { KpiCardSchema } from "@/components/taw/kpi-card"
const getMetrics = tool({
description: "Get business metrics",
parameters: z.object({ metric: z.string() }),
outputSchema: KpiCardSchema,
execute: async ({ metric }) => ({
id: metric,
stats: [{
key: "users",
label: "Active Users",
value: 8421,
format: { kind: "number", compact: true },
diff: { value: 4.2 },
}],
source: { label: "Analytics API", freshness: "just now" },
}),
})chat.tsx — render component
import { KpiCard } from "@/components/taw/kpi-card"
<KpiCard part={part} />Active Users
0+4.2%
Analytics API· just now
Every component handles loading, error, and success states automatically. Components are copied into @/components/taw/ — you own the UI and can customize anything. Shared types and validation come from the taw-ui npm package so contracts stay versioned. Override any --taw-* CSS variable to match your theme.