streamfield

The streaming-UI piece
your AI app is missing.

A React primitive for rendering Vercel AI SDK partial-object streams with field-by-field reveal physics. Diffs successive snapshots, derives per-field pending → streaming → complete state, hands you the state via render prop. Style it however you want.

npm install streamfieldGitHub ↗

playground

variant

stream frame 10 / 10

scrub the slider — fields enter as they appear in the partial

render

usage

A render-prop, not a kitchen sink.

import { StreamingReveal } from 'streamfield';
import 'streamfield/styles.css'; // optional defaults

<StreamingReveal stream={partial} variant="cascade" done={done}>
  {(f) => (
    <article>
      <h2 data-streamfield-state={f.title?.state}>{f.title?.value}</h2>
      <p data-streamfield-state={f.summary?.state}>{f.summary?.value}</p>
    </article>
  )}
</StreamingReveal>