Skip to content
Get packs

Guide · Open source

How to use OpenUI: scaffold a generative UI app in minutes

Updated · written with AI from the project's own documentation and checked against our catalogue data

OpenUI is an open-source framework (MIT licence, written in TypeScript) for building interfaces that an AI model generates as it responds. It uses a compact language called OpenUI Lang that the model streams, and a renderer that turns that stream into live UI in React, Vue, Svelte or Angular. This guide shows you how to scaffold a starter app, understand the component-library-to-prompt flow, and decide whether it fits your project.

OpenUIthesysdev/openui · ★ 14.7k · MIT

Quick start

  1. 1Scaffold the app. Run npx @openuidev/cli@latest create --name genui-chat-app in the folder where you want the project.
  2. 2Choose your component library. Define the components the model may use, or reuse the built-in libraries that come with the React packages.
  3. 3Generate the system prompt. OpenUI builds model instructions from your allowed components so the model knows what it can produce.
  4. 4Send the prompt to your model. Pass the generated system prompt to the language model your app uses.
  5. 5Stream OpenUI Lang to the client. Return the model's streamed OpenUI Lang output from your server to the browser.
  6. 6Render progressively. Use the renderer for your framework to display the UI as each part of the stream arrives.

What you need before you start

The README lists Node.js as the prerequisite. It does not state a minimum Node.js version, so check the project documentation before you begin.

You also need a frontend your app can use. OpenUI's first-party runtimes cover React, Vue, Svelte and Angular, and React has the most built-in pieces, including prebuilt chat layouts and component libraries.

  • Node.js installed on your machine
  • A supported frontend: React, Vue, Svelte or Angular
  • A language model you can send a system prompt to and stream output from

Install OpenUI by scaffolding a chat app

The quickest route, according to the README, is the OpenUI CLI. Run the command below in the folder where you want the project created. It creates a new app named genui-chat-app.

The scaffolded app gives you a working starting point with streaming, built-in UI and OpenUI Lang support, so you do not have to wire these together yourself.

npx @openuidev/cli@latest create --name genui-chat-app

Understand how OpenUI turns components into UI

OpenUI works from a component library you define. Those components are the only things the model is allowed to generate. OpenUI builds a system prompt from the library and sends it to your model.

As the model streams its reply in OpenUI Lang, the renderer parses the output progressively and draws the UI as tokens arrive. The README describes this flow as: component library, system prompt, LLM, OpenUI Lang stream, renderer, live UI.

  • Define or reuse a component library
  • Generate a system prompt from that library
  • Send the prompt to your model
  • Stream OpenUI Lang output back to the client
  • Render the output progressively with the renderer

Pick the right package for your stack

OpenUI is split into packages, so you only install what you need. The core package, @openuidev/lang-core, has no React, Angular, Vue or Svelte dependency and handles parsing and prompt generation.

For a React chat experience, @openuidev/react-ui provides prebuilt chat layouts and two built-in component libraries. If you want to bring your own chat UI, @openuidev/react-headless gives you chat state and streaming adapters instead. Vue, Svelte and Angular have their own bindings packages.

If you use LangChain or LangGraph agents that stream through AG-UI, the @openuidev/langchain package provides agent transformer and server helpers.

  • @openuidev/react-lang: define libraries and render streamed OpenUI Lang in React
  • @openuidev/react-ui: fastest path to a full React chat experience
  • @openuidev/react-headless: headless chat state for your own UI
  • @openuidev/vue-lang, @openuidev/svelte-lang, @openuidev/angular-lang: framework bindings
  • @openuidev/cli: scaffold apps and generate system prompts or JSON schema from a library

Try it in the Playground first

If you want to see the output before writing code, the README links to a Playground at openui.com/playground. There you can generate UI live using the default component library.

The Playground is a good way to judge whether OpenUI Lang produces the kind of interface you need before you commit to a project setup.

What people use it for

  • Adding AI-generated charts, forms or tables to a web app
  • Building a chat assistant or copilot that answers with interactive UI
  • Creating a React chat interface using prebuilt layouts and component libraries
  • Connecting LangChain or LangGraph agents that stream through AG-UI
  • Generating HTML emails from model output with @openuidev/react-email

Frequently asked questions

Is OpenUI free to use?

OpenUI is released under the MIT licence, as stated in the README. The licence file is in the repository. The project also states it has no official cryptocurrency, token or coin.

How do I install OpenUI?

The README's install method is a package manager, and the documented command scaffolds a new chat app: npx @openuidev/cli@latest create --name genui-chat-app. You need Node.js installed first.

What do I need to run OpenUI?

You need Node.js, although the README does not state a version. You also need one of the supported frontends (React, Vue, Svelte or Angular) and a language model that can receive a system prompt and stream output.

Does OpenUI work with Vue, Svelte or Angular?

Yes. The README lists first-party runtimes for React, Vue, Svelte and Angular, with packages @openuidev/vue-lang, @openuidev/svelte-lang and @openuidev/angular-lang. React has the most built-in extras, such as prebuilt chat layouts and component libraries.

How does OpenUI compare to Vercel AI SDK or CopilotKit?

The README lists Vercel AI SDK, CopilotKit, assistant-ui and Thesys C1 as comparable projects but does not compare them feature by feature. Check each project's documentation to see which matches your needs.

Can I use OpenUI for a plain text chatbot?

The project is built around generated UI, so it is not the right choice if you only need text replies. The README's own guidance points people with plain chatbot needs elsewhere.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

OpenUI suits developers who want an AI model to produce charts, forms, tables or interactive chat UI, especially in React, and teams using LangChain or LangGraph with AG-UI. Skip it if you only need text answers, if your frontend is outside React, Vue, Svelte or Angular, or if you need a long production track record, which the README does not document.

Install options & downloads