Generative UI Quickstart

OpenUI Gateway natively supports Generative UI with OpenUI Lang. It validates model output against your component library, corrects eligible errors as responses stream, and automatically retries requests with other providers when one is unavailable.

1. Create a component library

Create a library containing the components the model can use:

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

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

Learn more about defining components in the OpenUI Lang documentation.

2. Export the library specification

Use the OpenUI CLI to serialize the component library for your server:

npx @openuidev/cli@latest generate src/lib/openui.tsx --spec --out src/lib/openui.spec.json

The generated specification describes the available components and their properties. Regenerate it whenever the component library changes.

3. Create an inference API key

Create an inference key in the Thesys Console, then add it to your server environment:

THESYS_API_KEY=sk-th-your-key-here

Keep this key on the server and never expose it to browser code.

4. Choose a generation endpoint

Both endpoints accept a system prompt generated from the exported library specification.

import OpenAI from "openai";
import { generateSystemPrompt } from "@openuidev/lang-core";
import library from "./openui.spec.json";

const gateway = new OpenAI({
  apiKey: process.env.THESYS_API_KEY,
  baseURL: "https://api.thesys.dev/v1/embed",
});

const completion = await gateway.chat.completions.create({
  model: "openai/gpt-5",
  messages: [
    { role: "system", content: generateSystemPrompt({ cloud: true, library }) },
    { role: "user", content: "Compare quarterly revenue by region." },
  ],
  stream: true,
});

Gateway validates the generated OpenUI Lang against the same library specification and corrects invalid output while it streams.

5. Render the UI

Pass the accumulated OpenUI Lang text to <Renderer />. Set isStreaming until the server stream closes.

"use client";

import { Renderer } from "@openuidev/react-lang";
import { library } from "@/lib/openui";

export function GeneratedInterface({ response, isStreaming }) {
  return (
    <Renderer
      response={response}
      library={library}
      isStreaming={isStreaming}
      onAction={(action) => console.log(action)}
    />
  );
}

The renderer displays the interface progressively as the Gateway response arrives.

Continue with the Chat Completions or Responses API documentation for endpoint-specific options.