---
title: "Introduction"
description: "What GistUI is, what problem it solves, and how the pieces fit together."
---

> Documentation Index
> Fetch the complete documentation index at: https://gistui.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

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.

```gistui
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

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

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

## Where to go next

- [Quickstart](/docs/get-started/quickstart/) — Install, send the prompt, render the stream. About five minutes.
- [How it works](/docs/get-started/how-it-works/) — The language, the parser, patches and autofix.
- [Connect a model](/docs/models/) — OpenAI, Anthropic, Vercel AI SDK, gateways, local models.
- [Components](/docs/components/) — All 63 components with live examples and props.
- [GistUI Protocol v1](/docs/protocol/) — The open format behind GistUI, and why it can be a standard.
- [Use with coding agents](/docs/get-started/agents/) — The agent skill, llms.txt and Markdown pages.

Source: https://gistui.com/docs/get-started/index.mdx