Streaming text

npx shadcn@latest add "@assistant-ui/elements-streaming-text"

npx assistant-ui@latest init

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";

export default function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your components */}
    </AssistantRuntimeProvider>
  );
}

npx shadcn@latest add "@assistant-ui/elements-streaming-text"

Word by word text with the newest handful tinted blue and a caret at the end while it streams; older words fade back to plain text over the next few hundred milliseconds. With a runtime you feed it a part's growing text and its running status; standalone you hold the segments and a reveal count yourself.

Getting started

"use client";

import { useMemo } from "react";
import type { TextMessagePartComponent } from "@assistant-ui/react";
import { StreamingText, type Segment } from "@/components/assistant-ui/elements/streaming-text";

const StreamingTextPart: TextMessagePartComponent = ({ text, status }) => {
  const segments = useMemo<Segment[]>(() => [{ text }], [text]);
  const count = useMemo(() => text.split(" ").length, [text]);
  return <StreamingText segments={segments} count={count} streaming={status.type === "running"} />;
};

import { MessagePrimitive } from "@assistant-ui/react";

<MessagePrimitive.Parts components={{ Text: StreamingTextPart, Reasoning: StreamingTextPart }} />

"use client";

import { useState } from "react";
import { StreamingText, type Segment } from "@/components/assistant-ui/elements/streaming-text";

const SEGMENTS: Segment[] = [
  { text: "The response streams in as" },
  { text: "useAuiState", mono: true },
  { text: "resolves each part." },
];

export function Answer() {
  const [count, setCount] = useState(0);
  return <StreamingText segments={SEGMENTS} count={count} streaming={count < 12} />;
}

useEffect(() => {
  const id = setInterval(() => setCount((c) => Math.min(c + 1, 12)), 90);
  return () => clearInterval(id);
}, []);

Anatomy

<p data-slot="streaming-text">
  {/* revealed words, newest two tinted while streaming */}
  <span aria-hidden />{/* caret, only while streaming and at least one word is shown */}
</p>

Every segment's text is split on spaces and rejoined into words separated by a single space each: a segment's own line breaks or repeated spaces do not survive into the rendered output. count clamps between 0 and the total word count (a negative or NaN count shows nothing, an overly large one shows everything). While streaming is true, the last two words currently shown render tinted; every earlier word is plain text, and a word already past that trailing window transitions back to plain over 700ms rather than snapping. The trailing caret only renders when streaming is true and at least one word is shown.

Examples

Marking a span as code

const segments: Segment[] = [
  { text: "Read the value from" },
  { text: "response.data", mono: true },
  { text: "before formatting it." },
];

Restyle the text

Both lanes take className on the root, which starts as min-h-[8.5rem] max-w-sm text-sm leading-relaxed. The tint and the caret are both fixed to text-blue-500/bg-blue-500; there is no prop for either color.

<StreamingText className="max-w-none text-base" /* ... */ />

API reference