Callout

When to useCopy Anchor Link

• There's a safety issue, an irreversible consequence, a legal or allergy concern, or a hard deadline.
• A caveat would change what the user does, like "Stock levels are from 2 hours ago".

When not to useCopy Anchor Link

• To restate or emphasize the answer itself.
• For general tips or nice-to-knows. Put them in the text.
• More than once in a reply. If everything is highlighted, nothing is.

TonesCopy Anchor Link

The tone changes only the icon and the title color, on one quiet surface. There are no colored side stripes or one-color boxes, so a callout stands out because it's rare, not because it's loud. Screen readers hear the tone as a prefix ("Warning: …").

How the agent should use itCopy Anchor Link

• At most one callout per reply.
• Pick the lowest tone that fits. Reserve critical for real harm or irreversible actions.
• Be specific: numbers, names and dates. Add source when the rule comes from somewhere.

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

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

import { tool } from "ai"
import { calloutTool } from "@/components/genui/callout.schema"

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

With LangGraphCopy Anchor Link

Push it from a graph node with ui.push({ name: "show_callout", 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