Streaming Skeleton

This isn't an agent tool. The agent never calls it: the Renderer or your host renders GenUIPlaceholder in the gap between "a tool call started" and "we know which component it is", then swaps in the real component.

When to useCopy Anchor Link

• A tool call has started, but its name or props haven't arrived, so the real component can't render yet.
• You know roughly what's coming (a table, a list, a card) and want the message to keep its place.

When not to useCopy Anchor Link

• The component is known. Render it with status="streaming": every GenUI component has its own loading state.
• The agent is still writing text. Show the text as it streams instead.

How the host should use itCopy Anchor Link

• Replace it as soon as the tool name is known. The real component's streaming state takes over from there.
• Pick the shape from the tool name when you can, and fall back to card.
• Keep lines close to the expected size, so the layout doesn't jump when the component arrives.
• Set activity only when you know the step (a search tool is running, the model is writing). Otherwise leave it out.

ShapesCopy Anchor Link

Activity orbCopy Anchor Link

Set activity and the placeholder shows a small monochrome orb with its label above the shapes, so the user sees what the agent is doing, not just that it's busy. Each activity has its own glyph:

label replaces the default text ("Searching the ledger…"). The orb ships as its own file, components/genui/orb.tsx, and you can use it on its own: <Orb variant="orbit" pill />. It takes variant, size (default 20), label, pill and announce (set it to false inside another status region). It's drawn with currentColor and animated with motion, so it needs no extra CSS. Adapted from Halaska UI's Orb (MIT).

AccessibilityCopy Anchor Link

• The root is role="status" with aria-busy="true", and an sr-only label ("Generating…" by default) is announced politely. The skeleton shapes themselves are hidden from assistive tech.
• With activity set, the label is shown next to the orb instead of sr-only, and the root announces it. The orb glyph is hidden from assistive tech.
• With reduced motion turned on, the pulse stops, the shapes stay still and the orb's dots stop moving.

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

There's no tool to register. Render the placeholder for a tool part that has no name or no input yet:

import { GenUIPlaceholder } from "@/components/genui/streaming-skeleton"

const shapes = {
  show_table: "table",
  show_checklist: "list",
  answer_with_sources: "text",
} as const

function ToolPart({ part }) {
  if (part.state === "input-streaming" && part.input === undefined) {
    return <GenUIPlaceholder shape={shapes[part.toolName] ?? "card"} />
  }
  return <GenUIRenderer call={fromAISDK(part)} catalog={catalog} />
}

With LangGraphCopy Anchor Link

Render it for a UI message whose name or props haven't arrived yet, then hand the message to the Renderer once they have.

SchemaCopy Anchor Link

Host props: className. It is always in the streaming state (data-status="streaming").

SourceCopy Anchor Link