Overview

OpenUI Lang is the contract between a model and your application. You define the components the model may use, generate instructions from those definitions, and stream the model's OpenUI Lang response into a renderer.

Four pieces make that flow work:

• Component library: Your Zod schemas and framework components define what the model can use and how each element behaves in your application.
• System prompt: The prompt generator turns that library into component signatures, language rules, examples, and streaming instructions for the model.
• Parser: The streaming parser turns OpenUI Lang into a typed element tree, validates component usage, and handles partial output while tokens arrive.
• Renderer: The renderer maps the parsed tree to your components so the result uses your design system and application behavior.

The core loop

1. Define the components your application supports.
2. Generate model instructions from those definitions.
3. Send the instructions and conversation through the Gateway.
4. Stream the resulting OpenUI Lang into the renderer.
5. Handle component interactions with application state, tools, queries, and mutations.

The language and renderer do not depend on a model provider, chat library, or hosted service. The Gateway is the default in these docs because it adds streaming correction and provider fallbacks without changing the component contract in your application.

Example

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")

Continue with Defining Components, then read System Prompts and The Renderer.