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

# Use AgentUI with OpenUI

> Register AgentUI 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 AgentUI components you allow.

## Install

```bash
npm install @openuidev/react-lang @openuidev/lang-core zod
npm install openai
npx shadcn@latest add https://www.agentui.pro/r/message.json
npx shadcn@latest add https://www.agentui.pro/r/prompt-input.json
npx shadcn@latest add https://www.agentui.pro/r/agent-activity.json
```

## Register components

Use `defineComponent` to map an OpenUI Lang node to an AgentUI 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 { Message, MessageBubble, MessageBubbleContent } from "@/components/agents/message";

const AgentMessage = defineComponent({
  name: "Message",
  description: "A user or assistant message rendered in the conversation.",
  props: z.object({
    text: z.string(),
    from: z.enum(["user", "assistant"]).default("assistant"),
  }),
  component: ({ props }) => (
    <Message from={props.from}>
      <MessageBubble>
        <MessageBubbleContent>{props.text}</MessageBubbleContent>
      </MessageBubble>
    </Message>
  ),
});
```

## 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 agentuiLibrary = createLibrary({
  root: "Stack",
  components: [Stack, AgentMessage],
});
```

## Generate the prompt

Generate a serializable library specification whenever the component library changes:

```bash
npx @openuidev/cli@latest generate \
  --spec ./lib/agentui-library.tsx \
  --out ./lib/generated/agentui-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={agentuiLibrary}
  isStreaming={isStreaming}
  onAction={(event) => onSend(event.humanFriendlyMessage)}
/>
```

## Why AgentUI fits

AgentUI 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)