OpenUI
10890

Overview

Build agents that respond with interactive interfaces made from your components.

Build an agent that answers with charts, forms, tables, and dashboards made from your own components, instead of plain text or Markdown.

Try the live demo →

Quickstart

To create a new agent app, run the OpenUI CLI and customize the project it generates. You need Node.js 20 or later:

npx @openuidev/cli@latest create

How it works

OpenUI works with any agent framework and chat UI. The agent writes its responses in OpenUI Lang, and the chat UI renders them with the OpenUI renderer. The agent loop, tools, and conversation stay the way they are.

One turn of an OpenUI agentThe chat UI sends the user's message to the agent backend. The backend sends the model a system prompt that includes OpenUI instructions, along with the messages. The model may call tools, which the backend runs and returns results for. The model streams OpenUI Lang to the backend, which forwards the stream to the chat UI, where the renderer draws components as lines arrive. When the user clicks a button in the generated interface, the chat UI sends the action and form values to the backend as a new turn.MessagePromptTool callResultOpenUI LangStreamActionwith form valuesChat UIRenders the streamwith your componentsYour frontendAgent backendAdds OpenUIinstructions tothe system promptYour codeModelAny provider,or OpenUI GatewayToolsRun by your agent

Every agent needs two changes:

  1. The backend adds instructions generated from the component library to the agent's system prompt, so the model writes OpenUI Lang.
  2. The chat UI renders the streamed OpenUI Lang with the renderer, and sends user interactions in the generated interface back to the agent.

For a step-by-step walkthrough of one turn, read the full explanation.

Set up the backend

Set up UI generation

Define the component library and add its generated instructions to the agent.

Tools: agent-side vs. UI-side

Fetch data in the agent before it responds, or let the generated UI fetch it live.

Conversation history

Send earlier turns, tool results, and user actions back to the model.

Agent frameworks

Complete guides for the Vercel AI SDK, LangGraph Platform, Vercel Eve, and Pi.

Choose a chat UI

Compare the options to see what each one handles for you.

Agent Interface

OpenUI's complete React chat UI, with threads, streaming, tool activity, and actions built in.

assistant-ui

Keep assistant-ui in charge of the conversation while OpenUI renders the assistant's responses.

CopilotKit

Add OpenUI rendering to an application whose chat is built with CopilotKit.

Custom chat UI

Connect an existing message list and composer directly to the OpenUI renderer.

Run it in production

Route model requests through Gateway to correct invalid OpenUI Lang as it streams and fail over to another provider when one is unavailable. See OpenUI in production for Autofix, Reliability Monitoring, and deployment.

How it works

What happens in one turn of an agent that responds with OpenUI Lang.

On this page

QuickstartHow it worksSet up the backendChoose a chat UIRun it in production