PettyUI/.firecrawl/openui-overview.md

# Overview

Key building blocks of the OpenUI framework and the built-in component libraries.

Copy MarkdownOpen

OpenUI is built around four core building blocks that work together to turn LLM output into rendered UI:

- **Library** — A collection of components defined with Zod schemas and React renderers. The library is the contract between your app and the AI — it defines what components the LLM can use and how they render.

- **Prompt Generator** — Converts your library into a system prompt that instructs the LLM to output valid OpenUI Lang. Includes syntax rules, component signatures, streaming guidelines, and your custom examples/rules.

- **Parser** — Parses OpenUI Lang text (line-by-line, streaming-compatible) into a typed element tree. Validates against your library's JSON Schema and gracefully handles partial/invalid output.

- **Renderer** — The `<Renderer />` React component takes parsed output and maps each element to your library's React components, rendering the UI progressively as the stream arrives.


## [Built-in Component Libraries](https://www.openui.com/docs/openui-lang/overview\#built-in-component-libraries)

OpenUI ships with two ready-to-use libraries via `@openuidev/react-ui`. Both include layouts, content blocks, charts, forms, tables, and more.

### [General-purpose library (`openuiLibrary`)](https://www.openui.com/docs/openui-lang/overview\#general-purpose-library-openuilibrary)

Root component is `Stack`. Includes the full component suite with flexible layout primitives. Use this for standalone rendering, playgrounds, and non-chat interfaces.

```
import { openuiLibrary, openuiPromptOptions } from "@openuidev/react-ui/genui-lib";
import { Renderer } from "@openuidev/react-lang";

// Generate system prompt
const systemPrompt = openuiLibrary.prompt(openuiPromptOptions);

// Render streamed output
<Renderer library={openuiLibrary} response={streamedText} isStreaming={isStreaming} />
```

### [Chat-optimized library (`openuiChatLibrary`)](https://www.openui.com/docs/openui-lang/overview\#chat-optimized-library-openuichatlibrary)

Root component is `Card` (vertical container, no layout params). Adds chat-specific components like `FollowUpBlock`, `ListBlock`, and `SectionBlock`. Does not include `Stack` — responses are always single-card, vertically stacked.

```
import { openuiChatLibrary, openuiChatPromptOptions } from "@openuidev/react-ui/genui-lib";
import { FullScreen } from "@openuidev/react-ui";

// Use with a chat layout
<FullScreen
  componentLibrary={openuiChatLibrary}
  processMessage={...}
  streamProtocol={openAIAdapter()}
/>
```

Both libraries expose a `.prompt()` method to generate the system prompt your LLM needs. See [System Prompts](https://www.openui.com/docs/openui-lang/system-prompts) for CLI and programmatic generation options.

### [Extend a built-in library](https://www.openui.com/docs/openui-lang/overview\#extend-a-built-in-library)

```
import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { openuiLibrary } from "@openuidev/react-ui/genui-lib";
import { z } from "zod";

const ProductCard = defineComponent({
  name: "ProductCard",
  description: "Product tile",
  props: z.object({
    name: z.string(),
    price: z.number(),
  }),
  component: ({ props }) => <div>{props.name}: ${props.price}</div>,
});

const myLibrary = createLibrary({
  root: openuiLibrary.root ?? "Stack",
  componentGroups: openuiLibrary.componentGroups,
  components: [...Object.values(openuiLibrary.components), ProductCard],
});
```

## [Usage Example](https://www.openui.com/docs/openui-lang/overview\#usage-example)

Define LibRender CodeSystem PromptLLM Output

OpenUI Lang (Token Efficient)Copy

```
root = Stack([welcomeCard])
welcomeCard = MyCard([welcomeHeader, welcomeBody])
welcomeHeader = CardHeader("Welcome", "Get started with our platform")
welcomeBody = Stack([signupForm], "column", "m")
signupForm = Form("signup", [nameField, emailField], actions)
nameField = FormControl("Name", Input("name", "Your name", "text", ["required", "minLength:2"]))
emailField = FormControl("Email", Input("email", "you@example.com", "email", ["required", "email"]))
actions = Buttons([signUpBtn, learnMoreBtn], "row")
signUpBtn = Button("Sign up", "submit:signup", "primary")
learnMoreBtn = Button("Learn more", "action:learn_more", "secondary")
```

Output Preview

Welcome

Get started with our platform

Name\*

Email\*

Sign upLearn more

## [Next Steps](https://www.openui.com/docs/openui-lang/overview\#next-steps)

[**Defining Components** \\
\\
Create custom components with Zod schemas and React renderers.](https://www.openui.com/docs/openui-lang/defining-components) [**System Prompts** \\
\\
Generate and customize LLM instructions from your library.](https://www.openui.com/docs/openui-lang/system-prompts) [**The Renderer** \\
\\
Parse and render streamed OpenUI Lang in React.](https://www.openui.com/docs/openui-lang/renderer) [**Chat Integration** \\
\\
Build AI chat interfaces with prebuilt layouts.](https://www.openui.com/docs/chat)

[Quick Start\\
\\
Bootstrap a Generative UI chat app in under a minute.](https://www.openui.com/docs/openui-lang/quickstart) [Defining Components\\
\\
Define OpenUI components with Zod and React renderers.](https://www.openui.com/docs/openui-lang/defining-components)

### On this page

[Built-in Component Libraries](https://www.openui.com/docs/openui-lang/overview#built-in-component-libraries) [General-purpose library (`openuiLibrary`)](https://www.openui.com/docs/openui-lang/overview#general-purpose-library-openuilibrary) [Chat-optimized library (`openuiChatLibrary`)](https://www.openui.com/docs/openui-lang/overview#chat-optimized-library-openuichatlibrary) [Extend a built-in library](https://www.openui.com/docs/openui-lang/overview#extend-a-built-in-library) [Usage Example](https://www.openui.com/docs/openui-lang/overview#usage-example) [Next Steps](https://www.openui.com/docs/openui-lang/overview#next-steps)