Open-source streaming UI runtime

Turn model output into live interfaces.

StreamViz recovers partial model-generated HTML, isolates it safely, and renders interactive visualizations inside your React conversation—before generation finishes.
Get started →
View on GitHub
(opens in new tab)
$
npm install streamviz-react
React 19 ready
Secure iframe boundary
Partial HTML recovery

One stream. Three visible stages.

Watch a function call become an interactive artifact without hiding the model-to-interface boundary.
diagramAgent conversation streaming sequence
01 · MODEL STREAM
POST /v1/chat/completions
text/event-stream · OpenAI-compatible SSE
raw response — json
​
02 · PARSED PAYLOAD
titleAgent conversation streaming sequence
loading_messageMapping participants…
widget_code · 0 KB — html
​
03 · ASTRYX CHAT
surfaceAssistant message · live artifact
Prompt, tool state, and rendered output stay in one conversation flow.
Create an Agent conversation system sequence diagram.
Why StreamViz

The missing runtime between tokens and UI.

01

Render during generation

Recover useful structure from incomplete HTML and update the same artifact as new tokens arrive.
02

Secure by default

Sanitize generated markup and execute each artifact inside a restrictive iframe sandbox.
03

Host-controlled

Keep themes, exports, clipboard, prompts, and notifications inside your application boundary.
React integration

One component. Every streamed chunk.

Pass the accumulated HTML as it arrives, then set final when the stream ends. StreamViz recovers and renders every useful state in between.Read the React API →
app.tsx — tsx
import { StreamVisualization } from 'streamviz-react/react'
​
return (
  <StreamVisualization
    code={streamedHtml}
    final={isComplete}
  />
)
StreamViz
Streaming visual artifacts for AI agents.Apache-2.0 · Open source
ResourcesDocsPlayground
CommunityGitHub(opens in new tab)Contributing(opens in new tab)Code of Conduct(opens in new tab)