streamfield

Your streaming AI UI
feels broken.

If you've built a UI on `streamObject` from the Vercel AI SDK, you know the feeling: the title flickers in, the bullets snap into the DOM, the summary rewrites itself mid-render. CSS transitions can't see what changed. streamfield can. It diffs each partial-object snapshot, tells you which fields are still arriving, and hands the state to your children via render prop.

For: anyone who's shipped a streamObject UI and watched the fields land like a slot machine.

npm install streamfieldGitHub ↗

playground · before vs. after

variant

stream frame 10 / 10

Scrub the slider. Watch the left pane flicker as fields snap in. Watch the right pane handle it.

without streamfield

Top-performing regions

North America leads on ARR, Europe leads on seats per deal.

· NA: $1.2M ARR
· EU: 12.4 seats/deal
· APAC: 38% churn

confidence 86%

with streamfield

usage

One render prop. Four props. Done.

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>