PrimitivesStreamingText

Streaming Text

Token reveal with an optional blinking caret for in-progress assistant replies.

StreamingText ships with a full API table, a copyable example, and accessibility notes.

tsx

Streaming tokens as they arrive...

Installation

Install the package once, then import StreamingText from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { StreamingText } from "@agent-ui/react/streaming-text";

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.

tsx

1import { StreamingText } from "@agent-ui/react";
2 
3<StreamingText content={partialReply} />

API reference

Every prop StreamingText accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
content	string	—	Full reply text to reveal.
cursor	boolean	true	Shows the blinking caret.
className	string	—	Merged onto the span.

Accessibility

The caret is decorative and the animation respects prefers-reduced-motion.

Use it with the rest of the library

StreamingText composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

3 lines · copy-ready