Getting Started

Create a new app

You need Node.js 20 or later. Run:

npx @openuidev/cli@latest create

The interactive setup asks how to connect to a model and which agent framework to use, then creates the project, installs its dependencies, and can start the development server for you. See the CLI reference for templates, framework options, and deploying a preview.

End-to-end integration

Add OpenUI to an existing application: define the components the model can use, call a model with a system prompt generated from them, and render the response.

1. Create a component library

Create a library containing the components the model can use:

src/lib/openui.tsx

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. Call a model

Generate the system prompt from the library specification and send it with the user's message.

server.ts

import OpenAI from "openai";
import { generateSystemPrompt } from "@openuidev/lang-core";
import library from "./lib/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,
});

Both examples use a THESYS_API_KEY. Run the command below to sign in with Thesys, create a key, and write it to your .env file. Keep the key on the server and never expose it to browser code.

npx @openuidev/cli@latest generate-api-key

The OpenAI example uses Autofix to repair invalid OpenUI Lang against your library before it reaches your application. Gateway does this for you as the response streams.

You can also use Anthropic, Gemini, or any other LLM provider. Send the generated system prompt with your provider's SDK.

4. Render the UI

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

src/components/generated-interface.tsx

"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 response arrives.

Next steps

Add a chat interface: use Agent Interface for a complete chat UI, add OpenUI to assistant-ui or CopilotKit, or render generated UI in a custom chat UI.
Go deeper on OpenUI Lang: learn about defining components, system prompts, and the renderer.
Run it in production: read OpenUI in production, set up Reliability Monitoring, and deploy your app.