Getting Started

Create a new app

You need Node.js 20 or later. Run:

npx @openuidev/cli@latest create

The setup asks 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 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,
});

Generate an API key and write it to .env with the command below. Keep the key on the server and never expose it to browser code.

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

Gateway repairs invalid OpenUI Lang as the response streams.

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.