Choose a chat UI

The chat UI has two jobs in an OpenUI agent:

1. Render responses. Pass the streamed OpenUI Lang to the renderer instead of a Markdown renderer.
2. Send actions back. When the user clicks a button or submits a form in a generated interface, send it to the agent as a new user turn.

Everything else, such as the message list, the composer, threads, and the transport, works as it did before. Use OpenUI's own chat UI, or keep the one you have.

Compare the options

If you're starting a new chat UI, use Agent Interface. If you already have one, keep it: adding OpenUI changes a single component.

What every chat UI needs

Whichever chat UI you pick, these pieces come up:

• The same component library as the agent. Import library from the file created in Set up UI generation, so the renderer knows every component the agent can write.
• The component styles. Import @openuidev/react-ui/styles/index.css once when using the built-in components.
• isStreaming. Keep it true until the response stream closes, so the interface builds up as lines arrive.
• onAction. Send continue_conversation events back as a user turn with the form values, and open open_url events in a new tab. See Conversation history.
• toolProvider (optional). Pass it when generated interfaces load live data with Query(). See Tools.

Agent Interface handles streaming and actions for you; pass it the library through its componentLibrary prop. The other guides show each piece in that chat UI's own API.

Guides