v0.5 · Generative UI

Render LLM-generated UI in any framework.

<streaming-ui-script> is a single web component that turns a compact, streaming-first language into a rich, interactive UI inside its shadow DOM. Works with React, Vue, Angular, Svelte, plain HTML — or no framework at all.

Get started → Browse live demos

Drop-in CDN install

One script tag and one custom element — that's the whole integration.

<script type="module" src="https://asfand-dev.github.io/streaming-ui-script/dist/streaming-ui-script.js"></script>
<streaming-ui-script theme="light"></streaming-ui-script>
<script>
  const el = document.querySelector("streaming-ui-script");
  el.setResponse(`root = Stack([greeting])
greeting = Card([CardHeader("Hello", "Generative UI in plain HTML")])`);
</script>

Why streaming-ui-script?

Framework-agnostic

Built on the standard Custom Elements API — works wherever HTML works.

Streaming-first language

Parser, evaluator, reactive state, queries, mutations, and 20+ built-ins.

Stream tokens live

Use appendChunk() to feed LLM tokens as they arrive — the UI renders progressively.

Seven themes built in

Switch via the theme attribute or pass a custom JSON token map.

System prompt included

Auto-generated system_prompt.txt stays in lock-step with the bundled component library.

Extensible

JavaScript interactions

Built-in Script(...) + @Js(...) surfaces for React-style hooks — always on, no extra flags.

Multi-page routing

Hash-based Routes, NavLink, and @Navigate ship with every renderer.

Live demo

The component below was rendered from a few lines of Streaming UI Script. Use the theme picker to swap palettes — the preview updates instantly.

Theme

Welcome card with KPIs & chart

root = Stack([welcome, kpis, chart, follow])
welcome = Card([
  CardHeader("Hello there", "Generative UI rendered from Streaming UI Script"),
  Markdown("This card was streamed in **plain text** and rendered as a real UI.")
])
kpis = Stack([
  StatCard("Active users", "12,540", "up", "+18% vs last week"),
  StatCard("Revenue", "$48.2k", "flat", "0% vs last week"),
  StatCard("Errors", "12", "down", "-32% vs last week")
], "row", "m", "stretch", "start", true)
chart = Card([
  CardHeader("Daily traffic"),
  LineChart(["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], [
    Series("Visits",[120,180,160,210,250,200,230]),
    Series("Signups",[12,18,15,22,28,21,24])
  ])
])
follow = FollowUpBlock([
  FollowUpItem("Show conversion funnel"),
  FollowUpItem("Compare to last month"),
  FollowUpItem("Send report by email")
], "Try one of these")