---
title: "Use beUI with OpenUI"
description: "Register beUI components with OpenUI, generate the system prompt, stream OpenUI Lang, and render interactive UI."
documentation: "https://beui.dev/docs/openui"
markdown: "https://beui.dev/docs/openui.md"
---

# Use beUI with OpenUI

> Register beUI components with OpenUI, generate the system prompt, stream OpenUI Lang, and render interactive UI.

OpenUI lets a model emit an abstract UI tree instead of Markdown. Its React runtime maps every node to a component you register, so generated responses use only the beUI components you allow.

## Install

```bash
npm install @openuidev/react-lang @openuidev/lang-core zod
npm install openai
npx shadcn@latest add @beui/button @beui/animated-badge @beui/animated-number
```

## Register components

Use `defineComponent` to map an OpenUI Lang node to a beUI component. The Zod schema validates streamed model output, while the description teaches the model when to use the component.

```tsx
import { defineComponent, useTriggerAction } from "@openuidev/react-lang";
import { z } from "zod/v4";
import { Button } from "@/components/motion/button";

const BeButton = defineComponent({
  name: "Button",
  description: "Spring-pressed action button.",
  props: z.object({
    label: z.string(),
    action: z.string(),
  }),
  component: ({ props }) => {
    const triggerAction = useTriggerAction();
    return (
      <Button onClick={() => triggerAction(props.action)}>
        {props.label}
      </Button>
    );
  },
});
```

## Assemble the library

`createLibrary` collects the definitions, names the root node, and groups components with prompt guidance.

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

export const beuiLibrary = createLibrary({
  root: "Stack",
  components: [Stack, BeButton, BeBadge, BeStat],
});
```

## Generate the prompt

Generate a serializable library specification whenever the component library changes:

```bash
npx @openuidev/cli@latest generate \
  --spec ./lib/beui-library.tsx \
  --out ./lib/generated/beui-library.spec.json
```

Pass that specification to `generateSystemPrompt` in the server route, then stream the model's OpenUI Lang response to the browser.

## Render the stream

```tsx
<Renderer
  response={response}
  library={beuiLibrary}
  isStreaming={isStreaming}
  onAction={(event) => onSend(event.humanFriendlyMessage)}
/>
```

## Why beUI fits

beUI components own their files and ship through a shadcn-compatible registry. Generated interfaces inherit the host application's semantic color tokens and use real React controls.

## Resources

- [OpenUI](https://www.openui.com)
- [Defining components](https://www.openui.com/docs/openui-lang/defining-components)
- [shadcn chat example](https://www.openui.com/docs/openui-lang/examples/shadcn-chat)