NewWe're introducing OpenUI Lang v0.5

OpenUI

The Open Standard for Generative UI

Try Playground

NewWe're introducing OpenUI Lang v0.5

Try Read more

NewIntroducing OpenUI Lang v0.5

OpenUI

The Open Standard for Generative UI

Try Demo Star us on Github

An open source toolkit to make your
AI apps respond with your UI.

You define your library

import { z } from "zod"
import { Carousel, CarouselCard } from "components/Carousel"
import { defineComponent, createLibrary } from "@openuidev/react-lang"

const CarouselCard = defineComponent({
  name: "CarouselCard",
  props: z.object({
    title: z.string(),
    description: z.string().optional(),
    imageUrl: z.string().url(),
    ctaLabel: z.string(),
  }),
  component: ({ props }) => <CarouselCard {...props} />,
})

const Carousel = defineComponent({
  name: "Carousel",
  props: z.object({
    cards: z.array(CarouselCard.ref),
  }),
  component: ({ props }) => <Carousel {...props} />,
})

export const library = createLibrary({
  root: "Carousel",
  components: [Carousel, CarouselCard],
})

Free Wifi

Hotel Plaza Athenee

Haute couture suites; courtyard dining; Dior spa; near Champs-Élysées.

Book

OpenUI generates system prompt

LLM responds in OpenUI Lang

Renderer parses and renders UI

import { z } from "zod"
import { Carousel, CarouselCard } from "components/Carousel"
import { defineComponent, createLibrary } from "@openuidev/react-lang"

const CarouselCard = defineComponent({
  name: "CarouselCard",
  props: z.object({
    title: z.string(),
    description: z.string().optional(),
    imageUrl: z.string().url(),
    ctaLabel: z.string(),
  }),
  component: ({ props }) => <CarouselCard {...props} />,
})

const Carousel = defineComponent({
  name: "Carousel",
  props: z.object({
    cards: z.array(CarouselCard.ref),
  }),
  component: ({ props }) => <Carousel {...props} />,
})

export const library = createLibrary({
  root: "Carousel",
  components: [Carousel, CarouselCard],
})