Introduction

Primitives and components for streaming UI. Build beautiful progressive interfaces for AI applications.

StreamUI is a collection of primitives and components for building streaming user interfaces with React and AI SDK.

The Problem

When you use useObject from AI SDK, you get partial data that arrives piece by piece:

// Moment 1: object = undefined
// Moment 2: object = { location: "Tokyo" }
// Moment 3: object = { location: "Tokyo", temperature: 22 }
// Moment 4: object = { location: "Tokyo", temperature: 22, forecast: [...] }

Without StreamUI, you write this pattern over and over:

{data?.location ? (
  <h1>{data.location}</h1>
) : (
  <Skeleton className="h-6 w-32" />
)}

The Solution

StreamUI provides primitives that abstract this pattern:

import { Stream } from "@stream.ui/react";

<Stream.Root data={object} isLoading={isLoading}>
  <Stream.Field path="location" fallback={<Skeleton className="h-6 w-32" />}>
    {(location) => <h1>{location}</h1>}
  </Stream.Field>
</Stream.Root>

And components that use these primitives with beautiful styling:

import { StreamingText } from "@/components/stream/streaming-text";

<StreamingText data={object} isLoading={isLoading} />

Two Parts

Primitives (`@stream.ui/react`)

Install via npm. The foundation for building streaming UIs.

npm install @stream.ui/react

Primitive	Description
`Stream.Root`	Provides context with streaming data and state
`Stream.Field`	Accesses a field by path, shows fallback while undefined
`Stream.List`	Renders arrays that grow as data streams in
`Stream.When`	Conditionally renders based on stream state

Components (copy/paste)

Like shadcn/ui, components are not installed via npm. Copy them into your codebase and customize.

npx shadcn@latest add "https://streamui.dev/r/streaming-text.json"

Components use the primitives internally and work with shadcn/ui out of the box.

Quick Start

1. Install primitives

npm install @stream.ui/react

2. Add a component

npx shadcn@latest add "https://streamui.dev/r/streaming-text.json"

3. Use with AI SDK

import { experimental_useObject as useObject } from "@ai-sdk/react";
import { StreamingText, streamingTextSchema } from "@/components/stream/streaming-text";

export function TextDemo() {
  const { object, submit, isLoading } = useObject({
    api: "/api/text",
    schema: streamingTextSchema,
  });

  return (
    <StreamingText 
      data={object ?? undefined} 
      isLoading={isLoading && !object} 
    />
  );
}

Philosophy

Primitives are installed — npm install @stream.ui/react
Components are copied — own the code, customize freely
Works with shadcn — components use shadcn primitives
AI SDK native — built for useObject and structured streaming

Introduction

On this page