NewThe default workspace for OpenClaw. Meet OpenClaw-OS.

OpenUI

The Open Standard for Generative UI

Copied. Paste in your terminal to install.

Star us on GitHub

NewThe default workspace for OpenClaw. Meet OpenClaw-OS.

Meet OpenClaw-OS

NewMeet OpenClaw-OS

OpenUI

The Open Standard for Generative UI

Copied. Paste in your terminal to install.

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],
})