Introduction | GistUI

GistUI is a rendering engine for generative UI. A language model answers in GistUI Lang, a compact, line-based language for interfaces, and your app renders it as real, interactive components while the text is still streaming.

You keep your model, your framework and your design system. GistUI is the part in between: a system prompt that teaches the model the language, and a renderer that turns the answer into UI.

Preview

Loading preview…

root = Page(head, kpis, Grid(trend, mix, cols:2), more, accent:orange)
head = Header("Q3 revenue", "All regions · updated Oct 1")
kpis = Stats(kpiData)
trend = Card(Chart(rev, type:area, title:"Monthly revenue", y:"USD"))
mix = Card(Chart(channels, type:donut, title:"By channel"))
more = FollowUps(["Compare with Q2", "Show top customers"])
kpiData = |Label|Value|Delta|Note
|Revenue|$1.2M|+8%|vs Q2
|Customers|3,410|+2.1%|vs Q2
|Churn|1.8%|-0.4pt|vs Q2
rev = |Month|Revenue
|Jul|380000
|Aug|402000
|Sep|431000
channels = |Channel|Share
|Organic|46
|Paid|31
|Partners|23

The text under the preview is everything the model wrote. Press Replay stream to watch it render the way it does when a model streams it.

What you get


Any framework	React, Vue, Svelte, Solid or vanilla JavaScript. The same 63 components, look and behaviour in each.
Any model	It needs a text stream, nothing else. OpenAI, Anthropic, the Vercel AI SDK, AI gateways and local models all work.
Streaming by design	Each statement is parsed once, as it arrives. Only the components that changed render again.
Repairs in code	When an answer ends with mistakes, the renderer fixes them deterministically. No second model call.
Safe by default	A program is untrusted input. It cannot run code, and tools that change something run only when a person presses a button.
Your design system	Restyle with tokens, or swap any component for your own (shadcn/ui, MUI, anything).

How the pieces fit

On the server, you call your model with GistUI’s system prompt and stream its text to the browser.
In the browser, <GistUI> parses the text as it arrives and renders components.
When a person acts (presses a button, submits a form), your onAction callback receives one typed object.

your server                         the browser
───────────                         ───────────
prompt().text ─► model ─► text ───► <GistUI stream> ─► components
                                          │
                                          └─► onAction(action) ─► your code

Where to go next

Quickstart

Install, send the prompt, render the stream. About five minutes.

How it works

The language, the parser, patches and autofix.

Connect a model

OpenAI, Anthropic, Vercel AI SDK, gateways, local models.

Components

All 63 components with live examples and props.

GistUI Protocol v1

The open format behind GistUI, and why it can be a standard.

Use with coding agents

The agent skill, llms.txt and Markdown pages.