react-lang

@openuidev/react-lang

Core runtime for OpenUI — define component libraries, generate model prompts, and render structured UI from streaming LLM output.

Install

npm install @openuidev/react-lang
# or
pnpm add @openuidev/react-lang

Peer dependencies: react >=19.0.0

Overview

@openuidev/react-lang provides three core capabilities:

1. Define components — Use defineComponent and createLibrary to declare what the model is allowed to generate, with typed props via Zod schemas.
2. Generate prompts — Call library.prompt() to produce a system prompt that instructs the model how to emit OpenUI Lang output.
3. Render output — Use <Renderer> to parse and progressively render streamed OpenUI Lang into React components.

Quick Start

1. Define a component

import { defineComponent } from "@openuidev/react-lang";
import { z } from "zod";

const Greeting = defineComponent({
  name: "Greeting",
  description: "Displays a greeting message",
  props: z.object({
    name: z.string().describe("The person's name"),
    mood: z.enum(["happy", "excited"]).optional().describe("Tone of the greeting"),
  }),
  component: ({ name, mood }) => (
    <div className={mood === "excited" ? "text-xl font-bold" : ""}>
      Hello, {name}!
    </div>
  ),
});

2. Create a library

import { createLibrary } from "@openuidev/react-lang";

const library = createLibrary({
  components: [Greeting, Card, Table /* ... */],
  root: "Card", // optional default root component
});

3. Generate a system prompt

const systemPrompt = library.prompt({
  preamble: "You are a helpful assistant.",
  additionalRules: ["Always greet the user by name."],
  examples: ["<Greeting name='Alice' mood='happy' />"],
});

4. Render streamed output

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

function AssistantMessage({ response, isStreaming }) {
  return (
    <Renderer
      response={response}
      library={library}
      isStreaming={isStreaming}
      onAction={(event) => console.log("Action:", event)}
    />
  );
}

API Reference

Component Definition

Export	Description
defineComponent(config)	Define a single component with a name, Zod props schema, description, and React renderer
createLibrary(definition)	Create a library from an array of defined components

Rendering

Export	Description
Renderer	React component that parses and renders OpenUI Lang output

RendererProps:

Prop	Type	Description
response	string | null	Raw OpenUI Lang text from the model
library	Library	Component library from createLibrary()
isStreaming	boolean	Whether the model is still streaming (disables form interactions)
onAction	(event: ActionEvent) => void	Callback when a component triggers an action
onStateUpdate	(state: Record<string, any>) => void	Callback when form field values change
initialState	Record<string, any>	Initial form state for hydration
onParseResult	(result: ParseResult | null) => void	Callback when the parse result changes

Parser (Server-Side)

Export	Description
createParser(library)	Create a one-shot parser for complete OpenUI Lang text
createStreamingParser(library)	Create an incremental parser for streaming input

Context Hooks

Use these inside component renderers to interact with the rendering context:

Hook	Description
useIsStreaming()	Whether the model is still streaming
useRenderNode()	Render child element nodes
useTriggerAction()	Trigger an action event
useGetFieldValue()	Get a form field's current value
useSetFieldValue()	Set a form field's value
useSetDefaultValue()	Set a field's default value
useFormName()	Get the current form's name

Form Validation

Export	Description
useFormValidation()	Access form validation state
useCreateFormValidation()	Create a form validation context
validate(value, rules)	Run validation rules against a value
builtInValidators	Built-in validators (required, email, min, max, etc.)

Types

import type {
  Library,
  LibraryDefinition,
  DefinedComponent,
  ComponentRenderer,
  ComponentRenderProps,
  ComponentGroup,
  PromptOptions,
  RendererProps,
  ActionEvent,
  ElementNode,
  ParseResult,
  LibraryJSONSchema,
} from "@openuidev/react-lang";

JSON Schema Output

Libraries can also produce a JSON Schema representation of their components:

const schema = library.toJSONSchema();
// schema.$defs["Card"]     → { properties: {...}, required: [...] }
// schema.$defs["Greeting"] → { properties: {...}, required: [...] }

Documentation

Full documentation, guides, and the language specification are available at openui.com.

License

MIT