OpenUI
Openui lang

Using the Standard Library

Use the built-in OpenUI library from @openuidev/react-ui.

OpenUI ships with a prebuilt openuiLibrary for common layouts, forms, content, and charts.

Install

pnpm add @openuidev/react-lang @openuidev/react-ui

Render with OpenUI library

import "@openuidev/react-ui/components.css";
import { Renderer } from "@openuidev/react-lang";
import { openuiLibrary } from "@openuidev/react-ui";

<Renderer library={openuiLibrary} response={streamedText} isStreaming={isStreaming} />;

Generate a spec and build the prompt

Use the CLI to generate the prompt and serialized library spec at build time. In your backend, use the spec with generateSystemPrompt:

pnpx @openuidev/cli@latest generate ./src/library.ts --out src/generated/system-prompt.txt

The command writes src/generated/system-prompt.spec.json beside the prompt file. Import that spec in your backend:

import { generateSystemPrompt, type LibrarySpec } from "@openuidev/lang-core";
import librarySpec from "./generated/system-prompt.spec.json";

const systemPrompt = generateSystemPrompt({
  library: librarySpec as LibrarySpec,
});

Extend it

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { openuiLibrary } from "@openuidev/react-ui";
import { z } from "zod";

const ProductCard = defineComponent({
  name: "ProductCard",
  description: "Product tile",
  props: z.object({
    name: z.string(),
    price: z.number(),
  }),
  component: ({ props }) => <div>{props.name}: ${props.price}</div>,
});

const myLibrary = createLibrary({
  root: openuiLibrary.root ?? "Stack",
  componentGroups: openuiLibrary.componentGroups,
  components: [...Object.values(openuiLibrary.components), ProductCard],
});

Notes

  • Default root component is Stack.
  • Form requires explicit buttons.
  • The generated library spec is the backend prompt source of truth

On this page

InstallRender with OpenUI libraryGenerate a spec and build the promptExtend itNotes