AI Streaming Text
Render streaming LLM output in React with a live cursor as tokens arrive. The generative-UI text primitive for AI apps. Install via the shadcn CLI.
When to use this in an AI app
Use AI Streaming Text for any partial assistant output that arrives token-by-token. The live cursor signals 'still generating' and keeps long responses readable as they stream in.
Browse all AI agent componentsPreview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-streaming-text.jsonStorybook
Explore all variants, controls, and accessibility checks in the interactive Storybook playground.
View in StorybookCode
import { forwardRef } from "react";
import { cn } from "../../lib/utils";
export type AIStreamingTextProps = React.ComponentPropsWithoutRef<"div"> & {
/** Cursor glyph shown while streaming. */
cursor?: string;
/** Whether new content is still arriving. */
isStreaming?: boolean;
/** Whether to show the streaming cursor. */
showCursor?: boolean;
/** Text content available from the stream. */
text: string;
};
const AIStreamingText = forwardRef<HTMLDivElement, AIStreamingTextProps>(
(
{
className,
cursor = "▍",
isStreaming = false,
showCursor = true,
text,
...props
},
ref,
) => {
return (
<div
aria-live={isStreaming ? "polite" : undefined}
className={cn(
"text-sm leading-6 text-foreground whitespace-pre-wrap",
className,
)}
ref={ref}
{...props}
>
{text}
{isStreaming && showCursor ? (
<span
aria-hidden="true"
className="ml-0.5 inline-block animate-pulse text-muted-foreground"
>
{cursor}
</span>
) : null}
</div>
);
},
);
AIStreamingText.displayName = "AIStreamingText";
export { AIStreamingText };