Quick Start

OpenUI comes with a "Batteries Included" Default Library containing 40+ pre-built components (charts, forms, layouts). This is the fastest way to get started.

Building a chat experience? Start with the Chat section first. It includes the full chat flow plus OpenUI/GenUI integration.

Installation

npm install @openuidev/lang-react @openuidev/react-ui

Usage

You do not need to define any schemas. Just import defaultLibrary and pass it to the renderer.

import '@openuidev/react-ui/styles.css';
import { Renderer } from '@openuidev/lang-react';
import { defaultLibrary } from '@openuidev/react-ui';

// In your chat component
<Renderer
  library={defaultLibrary}
  response={streamedText}
/>

Generating the Prompt

To make the LLM aware of these components, inject the system prompt on your backend.

// app/api/chat/route.ts
import { defaultLibrary } from '@openuidev/react-ui';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const response = await openai.chat.completions.create({
    model: 'gpt-5.2',
    messages: [
      { role: 'system', content: defaultLibrary.prompt() },
      ...messages,
    ],
    stream: true,
  });

  // ... handle stream
}

What's Included?

The default library covers most common UI patterns:

Data Visualization BarChart, LineChart, PieChart, ScatterPlot.

Forms & Inputs Form, Input, Select, DatePicker, Slider, Toggle.

Layouts Stack, Tabs, Accordion, Card.

Actions Button, ButtonGroup, RadioGroup.

View the Gallery: Check out the Component Library tab to see visual examples and props for every component.

Extending the Library

As you grow, you can combine the default library with your own domain-specific components.

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

const ProductCard = defineComponent({
  name: 'ProductCard',
  description: 'Displays a product with name, price, and image.',
  props: z.object({
    name: z.string(),
    price: z.number(),
    imageUrl: z.string().describe('URL of the product image'),
  }),
  component: ({ props }) => (
    <div className="border rounded p-4">
      <img src={props.imageUrl} alt={props.name} />
      <div>{props.name}</div>
      <div>${props.price}</div>
    </div>
  ),
});

const myLibrary = createLibrary({
  components: [
    ...Object.values(defaultLibrary.components),
    ProductCard,
  ],
});