OpenUI Lang

A line-oriented language designed for streaming, token efficiency, and type safety

An alternative to Vercel JSON renderer and A2UI that uses ~40% fewer tokens than equivalent JSON structures. Define your component library with Zod schemas and parse LLM responses into renderable components.

Build with Default Library Define Component Library

Key Features

Streaming Native

Line-oriented syntax means the UI renders line-by-line. No waiting for valid JSON closing braces.

Token Efficient

Uses ~40% fewer tokens than equivalent JSON structures, significantly reducing inference cost and latency.

Hallucination Resistant

Strictly typed against your Zod schemas. If the generated code does not match your definition, it does not render.

JSON vs OpenUI Lang

Compare the same UI component in both formats

JSON Format

~154 tokens

{
  "type": "Card",
  "props": {
    "title": "Welcome Back",
    "description": "Continue your journey"
  },
  "children": [
    {
      "type": "Input",
      "props": {
        "label": "Email",
        "placeholder": "Enter your email",
        "type": "email"
      }
    },
    {
      "type": "Input",
      "props": {
        "label": "Password",
        "placeholder": "Enter password",
        "type": "password"
      }
    },
    {
      "type": "Button",
      "props": {
        "label": "Sign In",
        "variant": "primary"
      }
    }
  ]
}

OpenUI Lang

~86 tokens

root = Card([header, emailField, passwordField, signInButton])
header = CardHeader("Welcome Back", "Continue your journey")
emailField = FormControl("Email", Input("email", "Enter your email", "email"))
passwordField = FormControl("Password", Input("password", "Enter password", "password"))
signInButton = Button("Sign In", "action:signIn", "primary")

How It Works

Click through each step to see the complete workflow

Define Library

Create your component library with Zod schemas and generate the system prompt

import { defineComponent, createLibrary } from '@openuidev/lang-react';
import { z } from 'zod';

const MyCard = defineComponent({
  name: 'MyCard',
  description: 'Displays a titled content card.',
  props: z.object({
    title: z.string(),
  }),
  component: ({ props }) => <div>{props.title}</div>,
});

export const myLibrary = createLibrary({
  components: [MyCard, ...otherComponents],
});

export const systemPrompt = myLibrary.prompt(); // Generated system prompt

Use Cases

Real-world applications where OpenUI Lang excels

Analytics Dashboards

Generate complex data visualizations and metric cards from natural language queries.

AI Chat Interfaces

Stream UI components in real-time as the LLM generates responses.

Dynamic Forms

Build adaptive forms that change based on user input or context.