Summary Card

When to useCopy Anchor Link

• You're opening a plan or overview with several key attributes the user will scan: a trip, an event, an incident, a project.
• The details follow below, and the user needs the shape of it first.

When not to useCopy Anchor Link

• There's one fact to report. Say it in a sentence.
• You're listing many records with the same fields. Use a Data Table.
• The facts would be filler, like "Difficulty: Easy" when nobody asked.

How the agent should use itCopy Anchor Link

• Use it once, at the top of the reply. It frames what follows.
• Keep the facts to 2–6 short label/value pairs, in the order the user cares about.
• Only set badge for a real state, like "Resolved". Never use it as decoration.

InstallationCopy Anchor Link

npx shadcn@latest add https://your-site.com/r/summary-card.json

UsageCopy Anchor Link

The Summary Card is display-only, so the tool can return immediately:

import { tool } from "ai"
import { summaryCardTool } from "@/components/genui/summary-card.schema"

const tools = {
  [summaryCardTool.name]: tool({
    description: summaryCardTool.description,
    inputSchema: summaryCardTool.inputSchema,
    execute: async () => ({ shown: true }),
  }),
}

Render it through the Renderer under show_summary, or directly:

<SummaryCard {...part.input} status={part.state === "input-streaming" ? "streaming" : "ready"} />

With LangGraphCopy Anchor Link

Push it from a graph node with ui.push({ name: "show_summary", props }, { message }), and render the thread's UI messages with the Renderer.

SchemaCopy Anchor Link

Host props: status (streaming or ready) and className.

SourceCopy Anchor Link