OpenUI
9860

Introduction

OpenUI is the open standard for Generative UI. At its core is OpenUI Lang, a compact language that lets models respond with live, interactive interfaces built from your own components, instead of only text. OpenUI Lang works with any model, agent framework, or chat UI.

Try the live demo →

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.

With Generative UI, the model composes the interface itself. It selects, configures, and combines components from your component library to build an interface for each request, whether that's an interactive chart, a form, or a multi-tab dashboard.

How it works

You define the components. The model decides how to combine them for each request, and your application renders the result.

How OpenUI worksYour component library gives your frontend its components and your backend its system prompt. Your frontend sends a message to your backend, which calls a model in one of two ways. The recommended way is through OpenUI Gateway, which calls any model and fixes the OpenUI Lang stream as it arrives. Alternatively, your backend calls your model provider directly and sends invalid output to Autofix to be fixed. Your backend streams the generated UI back to your frontend.Through OpenUI GatewayRecommendedCall models directlyMessageStreamComponentsPromptRequestStreamPromptOpenUI LangPromptOpenUI LangOutputFixedYour frontendRenders the streamwith your componentse.g. Agent InterfaceComponent libraryWhat the model usesYour backendRuns your agentand toolsYour codeOpenUI GatewayAny model, one APIFixes the streamAny modelOpenAI, Anthropic,and moreAutofixFixes the outputYour providerCalled directlyby your backend
  1. Define your component library: the components the model can use to generate UI.
  2. Generate the system prompt: OpenUI turns the library into instructions for the model.
  3. Call a model: through OpenUI Gateway (recommended), which validates and fixes the generation as it streams, or directly with your own provider, using Autofix to repair invalid output.
  4. Render the stream: the Renderer draws each component as its line arrives.

See it end to end in Getting Started.

What's in OpenUI

OpenUI gives you the tools to build Generative UI into your application and run it reliably in production.

To build Generative UI:

  • OpenUI Lang: Describes interfaces with your own components. Models generate it in less than half the tokens of JSON-based formats, and the renderer displays it progressively as it streams.
  • Agent Interface: A React SDK for a complete chat interface, with threads, streaming messages, tool activity, and generated components. Connect it to your existing agent backend, or add the renderer to assistant-ui, CopilotKit, or your own chat UI instead.

To run it in production:

  • Gateway: OpenRouter for Generative UI. One API for models across providers, with automatic failover when a provider is unavailable and Autofix built in to correct invalid OpenUI Lang as it streams.
  • Autofix: Repairs invalid OpenUI Lang after generation with one API call. Keep your existing model provider, inference setup, and agent framework.
  • Reliability Monitoring: Shows how often generated interfaces fail, which errors recur, and the generation behind each failure. It's enabled automatically with Gateway and Autofix, or through the Observability SDK with your own inference.

Learn about correction and monitoring options in OpenUI in production.

On this page

How it worksWhat's in OpenUI