How OpenUI works

Most AI applications are limited to returning text as Markdown or rendering pre-built UI responses. Markdown isn't interactive, and pre-built responses are rigid—they don't adapt to the context of the conversation.

Generative UI fundamentally changes this relationship. Instead of merely providing content, the AI composes the interface itself. It dynamically selects, configures, and combines components from a predefined library to create a purpose-built interface tailored to the user's immediate request, whether that's an interactive chart, a complex form, or a multi-tab dashboard.

Try demo

How it works

Your application provides a library of components and the relevant context. OpenUI Gateway sends the request to a model and corrects invalid output. The model uses OpenUI Lang to describe the interface, and the OpenUI Lang Renderer renders it using the provided library. Observability traces this process so you can find failures and improve reliability.

OpenUI Lang

OpenUI Lang is a compact, line-oriented language for describing generated interfaces. You define the components the model can use in a component library:

import { createLibrary } from "@openuidev/react-lang";
import { Chart, Metric, Stack } from "./components";

export const library = createLibrary({
  root: "Stack",
  components: [Stack, Metric, Chart],
});

OpenUI turns the component library into a system prompt that describes the available components and their properties. The model uses these instructions to generate OpenUI Lang, which streams to your application and renders with your components.

Learn more in the OpenUI Lang documentation.

Gateway

OpenUI Gateway is a reliability layer between your application and AI model providers. It routes requests across providers, validates generated interfaces, and corrects invalid model output before it reaches your application.

Integration options

OpenUI Gateway provides two OpenAI-compatible APIs:

• Chat Completions: A drop-in endpoint for applications that use the OpenAI Chat Completions API.
• Responses API: Build stateful model interactions with persistence and hosted tools.

Learn more in the OpenUI Gateway documentation.

Observability

Generative UI depends on model providers and model-generated output. Providers can fail, and models can generate invalid or incomplete interfaces.

OpenUI Observability helps you find these failures in production, trace affected generations, and identify recurring patterns. These insights help you improve your system prompt, component library, and model selection.

Observability identifies errors but does not correct generated output. Without OpenUI Gateway's validation and correction layer, invalid output can reach users as an incomplete or broken interface.

Learn more in the OpenUI Observability documentation.