Stream UI

Stream UI lets AI models generate live, interactive user interfaces using Prototyper UI components. Models output streaming JSON patches, and Stream UI progressively renders them into real React components.

How It Works

1. An AI model receives a system prompt describing available UI components
2. The model outputs JSONL (one JSON Patch operation per line)
3. Stream UI applies patches progressively, building a component tree
4. The rendered UI is fully interactive — forms bind to state, buttons trigger actions

Quick Example

import { Renderer } from "@prototyperai/stream-ui"
import { prototyperComponents } from "@prototyperai/stream-ui/components"

const spec = {
  root: "card",
  elements: {
    card: { type: "Card", props: {}, children: ["heading", "btn"] },
    heading: { type: "Heading", props: { text: "Hello World", level: 2 } },
    btn: {
      type: "Button",
      props: { label: "Click me" },
      on: { press: { action: "setState", params: { path: "/clicked", value: true } } },
    },
  },
  state: { clicked: false },
}

<Renderer spec={spec} registry={prototyperComponents} />

Key Features

• 20 components — Button, Card, Input, Tabs, Dialog, and more
• Streaming — UI builds progressively as the model generates
• State management — Two-way data binding with $bindState
• Actions — Built-in setState, pushState, removeState, toggleState, navigate
• Dynamic expressions — $state, $cond, $template, $item for data binding
• Visibility — Conditional rendering based on state
• Validation — 14 built-in field validators
• DX helpers — Builder functions for actions, visibility, and validation with full autocomplete
• Type safety — Infer spec types from catalog definitions with zero manual typing
• Store adapters — Sync Stream UI state with Zustand, Redux, or Jotai
• Prompt engineering — Modes, templates, and structured output for OpenAI and Anthropic
• Code export — Convert any spec to copy-paste JSX with specToJSX()

Architecture

Stream UI is a standalone package (@prototyperai/stream-ui) with zero AI SDK dependencies:

• Core engine — Framework-agnostic TypeScript: types, state, patching, expressions
• React renderer — Providers, hooks, and component wrappers
• Catalog system — Zod-based component definitions with prompt generation
• Codegen — Spec to JSX code export

@prototyperai/stream-ui
├── /core       — Types, state store, JSON Patch, expressions, visibility, validation
├── /react      — Renderer, StreamUIProvider, hooks (useUIStream, useBoundProp, etc.)
├── /components — 20 component wrappers + prototyperComponents registry
├── /catalog    — Component catalog builder + LLM prompt generation
└── /codegen    — specToJSX() converter

Next Steps

• Getting Started — Install and render your first spec
• Spec Format — Understand the flat spec structure
• Streaming — Connect to an AI model
• Expressions — Dynamic values and data binding
• Actions — Built-in actions and event handling
• Visibility — Conditional rendering based on state
• Validation — Field validation rules and error messages
• DX Helpers — Convenience builders for actions, checks, and visibility
• Type Safety — TypeScript inference and type-safe spec building
• Store Adapters — Integrate with Zustand, Redux, or Jotai
• Prompt Engineering — Customize AI prompts and structured outputs
• Catalog — Define and register component catalogs
• Code Export — Convert specs to copy-paste JSX
• API Reference — Complete API documentation