openui README

The project's README from github.com/thesysdev/openui. As one markdown file: README.md.

OpenUI - The Open Standard for Intelligent UI

OpenUI - The Open Standard for Intelligent UI

Build License: MIT Discord

thesysdev%2Fopenui | Trendshift

OpenUI is a full-stack, framework-agnostic Generative UI framework built around a compact, streaming-first language. A framework-agnostic core powers first-party runtimes for React, Vue, Svelte, and Angular, and React additionally ships built-in component libraries and ready-to-use chat interfaces. OpenUI Lang uses up to 67% fewer tokens than JSON.

Docs · Playground · Discord · Contributing

Important: OpenUI has no official cryptocurrency, token, or coin. Any asset using the OpenUI name is unaffiliated with this project and is not endorsed by its maintainers.


What is OpenUI

OpenUI Demo

At the center of OpenUI is OpenUI Lang: a compact, streaming-first language for model-generated UI. Instead of treating model output as only text, OpenUI lets you define components, generate prompt instructions from that component library, and render structured UI as the model streams.

Core capabilities:

Quick Start

npx @openuidev/cli@latest create --name genui-chat-app
cd genui-chat-app
echo "OPENAI_API_KEY=sk-your-key-here" > .env
npm run dev

This is the fastest way to start with OpenUI. The scaffolded app gives you an end-to-end starting point with streaming, built-in UI, and OpenUI Lang support.

What this gives you:

How it works

Your components define what the model can generate.

flowchart LR
    A["Component Library"] --> B["System Prompt"]
    B --> C["LLM"]
    C --> D["OpenUI Lang Stream"]
    D --> E["Renderer"]
    E --> F["Live UI"]
  1. Define or reuse a component library.
  2. Generate a system prompt from that library.
  3. Send that prompt to your model.
  4. Stream OpenUI Lang output back to the client.
  5. Render the output progressively with Renderer.

Try it yourself in the Playground: generate UI live with the default component library.

Packages

Package Best for Description
@openuidev/lang-core Framework-agnostic parsing and prompt generation Core parser, prompt-generation, runtime-evaluation, and type layer with no React, Angular, Vue, or Svelte dependency
@openuidev/langchain LangChain and LangGraph agents Agent transformer and server helpers that stream OpenUI through AG-UI
@openuidev/react-lang React rendering runtimes Define component libraries, generate prompts, and render streamed OpenUI Lang in React
@openuidev/react-headless Bring-your-own React chat UI Headless chat state, streaming adapters, and message format converters
@openuidev/react-ui Fastest path to a full React chat experience Prebuilt chat layouts, standalone UI primitives, and two built-in component libraries
@openuidev/react-email Email generation and HTML export React Email component definitions plus prompt options for model-generated emails
@openuidev/assistant-ui assistant-ui apps Tool UI renderers and instruction wiring for streaming OpenUI Lang inside assistant-ui
@openuidev/vue-lang Vue integrations Vue 3 bindings for defining model-renderable components and rendering streamed OpenUI Lang
@openuidev/svelte-lang Svelte integrations Svelte 5 bindings for defining model-renderable components and rendering streamed OpenUI Lang
@openuidev/angular-lang Angular integrations Angular bindings for defining component libraries and rendering streamed OpenUI Lang
@openuidev/browser-bundle CDN, iframe, and no-build embeds Prebuilt browser bundle that ships the renderer, UI library, React, and styles as script + stylesheet assets
@openuidev/a2ui A2UI with OpenUI Lang component payloads Framework-agnostic A2UI v1.0 protocol client with an optional React renderer
@openuidev/server Server side utilities Server utilities for OpenUI and OpenUI Gateway
@openuidev/observability-cloud Hosted observability in the Thesys console Cloud sink that batches OpenUI events and ships them to OpenUI Gateway
@openuidev/cli Project scaffolding and prompt generation CLI for creating new apps and generating system prompts or JSON schema from a library definition
@openuidev/openclaw-os-plugin OpenClaw workspaces OpenClaw OS plugin for serving OpenUI-powered OpenClaw workspaces

Common starting points:

# React app with OpenUI rendering and prebuilt components
npm install @openuidev/react-lang @openuidev/react-ui

# Framework-agnostic backend or Edge prompt generation
npm install @openuidev/lang-core

# LangChain/LangGraph agent and server integration
npm install @openuidev/langchain @langchain/langgraph

# Vue, Svelte, or Angular runtime
npm install @openuidev/vue-lang
npm install @openuidev/svelte-lang
npm install @openuidev/angular-lang

# A2UI protocol with OpenUI Lang component payloads
npm install @openuidev/a2ui zod

Why OpenUI Lang

OpenUI Lang is designed for model-generated UI that needs to be both structured and streamable.

Token efficiency benchmarks

Measured with tiktoken (GPT-5 encoder). OpenUI Lang vs two JSON-based streaming formats across seven UI scenarios:

Scenario Vercel JSON-Render Thesys C1 JSON OpenUI Lang vs Vercel vs C1
simple-table 340 357 148 -56.5% -58.5%
chart-with-data 520 516 231 -55.6% -55.2%
contact-form 893 849 294 -67.1% -65.4%
dashboard 2247 2261 1226 -45.4% -45.8%
pricing-page 2487 2379 1195 -52.0% -49.8%
settings-panel 1244 1205 540 -56.6% -55.2%
e-commerce-product 2449 2381 1166 -52.4% -51.0%
TOTAL 10180 9948 4800 -52.8% -51.7%

Full methodology and reproduction steps in benchmarks/.

Documentation

Detailed documentation is available at openui.com.

Repository structure

openui/
├── packages/
│   ├── react-lang/       # Core runtime (parser, renderer, prompt generation)
│   ├── react-headless/   # Headless chat state & streaming adapters
│   ├── react-ui/         # Prebuilt chat layouts & component libraries
│   ├── react-email/      # React Email component library for generated emails
│   ├── assistant-ui/     # assistant-ui Tool UI renderers for OpenUI Lang
│   ├── lang-core/        # Framework-agnostic parser, prompt, and runtime layer
│   ├── langchain/        # LangChain/LangGraph streaming integration
│   ├── vue-lang/         # Vue runtime bindings for OpenUI Lang
│   ├── svelte-lang/      # Svelte runtime bindings for OpenUI Lang
│   ├── angular-lang/     # Angular runtime bindings for OpenUI Lang
│   ├── browser-bundle/   # Script-tag bundle for CDN / iframe / no-build embeds
│   ├── a2ui/             # A2UI protocol with OpenUI Lang component payloads
│   ├── server/           # Server utilities for OpenUI & OpenUI Gateway
│   ├── observability/    # Framework-free observability event bus
│   ├── observability-cloud/ # Cloud sink shipping OpenUI events to Thesys
│   ├── devtools/         # Dev-only OpenUI Inspect widget
│   └── openui-cli/       # CLI for scaffolding & prompt generation
├── examples/             # Cookbooks and integration reference implementations
│   ├── agent-frameworks/
│   ├── app-frameworks/
│   ├── cookbooks/
│   ├── design-systems/
│   ├── harnesses/
│   └── miscellaneous/
├── docs/                 # Documentation site (openui.com)
└── benchmarks/           # Token efficiency benchmarks

Good places to start:

Community

How OpenUI compares

Feature OpenUI json-render (Vercel) A2UI (Google) CopilotKit OpenGenUI
Tokens 1x 3x 3x 4x
Latency (60 tok/s) 4.9s 14.2s 14.2s ~20s
Streaming Yes Yes Yes Partial
Consistent output Yes Yes Yes No
Components Library + custom Library + custom Custom only None
Multi-platform Web, mobile, email Web, mobile, PDF, email, video Web, iOS, Android Web
Built-in data fetching Yes No No No
Chat UI included Yes No No Yes

For more details, refer to the official OpenUI Lang comparison documentation.

Adopters

A list of organizations and projects using OpenUI is maintained in ADOPTERS.md. If you're using OpenUI, please consider adding your organization; it helps the project gain momentum and helps other adopters find peers using OpenUI in similar contexts.

Contributing

Contributions are welcome. See CONTRIBUTING.md for contribution guidelines and ways to get involved.

Agent Skill

OpenUI ships an Agent Skill so AI coding assistants (Claude Code, Codex, Cursor, Copilot, etc.) can help you scaffold, build, and debug Generative UI apps using OpenUI Lang.

The skill is maintained in the thesysdev/skills repository.

Install

# With the skills CLI (works across all agents)
npx skills add thesysdev/skills --skill openui

The skill covers component library design, OpenUI Lang syntax, system prompt generation, the Renderer, SDK packages, and debugging malformed LLM output.

Feedback

Found a bug or have an idea? Open an issue, or send anonymous feedback from your terminal:

npx @openuidev/cli feedback "Describe the problem or idea"

Coding agents using the OpenUI skill can send feedback for you. They remove personal details and code from the message and ask for your approval before sending it.

License

This project is available under the terms described in LICENSE.

openui (thesysdev/openui)

Searching Database…

11.4K ·GitHub
Что это такое?OpenUI — это открытый стандарт и фреймворк для Generative UI: он задаёт компактный язык, ориентированный на потоковую передачу (OpenUI Lang), который позволяет LLM генерировать структурированный, отображаемый интерфейс вместо простого текста или JSON. Среды выполнения есть для React, Vue, Svelte и Angular.
Это просто библиотека UI-компонентов или что-то большее?Это ядро, не привязанное к конкретному фреймворку (разбор, генерация промптов, отрисовка), плюс пакеты и среды выполнения для React, Vue, Svelte и Angular. Для React дополнительно есть готовые библиотеки компонентов и готовые интерфейсы чата.
Как запустить рабочее приложение OpenUI?Используйте CLI (@openuidev/cli), чтобы создать проект. Он даёт готовый сквозной пример с потоковой передачей, встроенными UI-компонентами и поддержкой OpenUI Lang.
Нужна ли мне LLM или конкретный агентский фреймворк, чтобы использовать это?Нужна модель, к которой можно обратиться: вы определяете библиотеку компонентов, генерируете на её основе системный промпт, отправляете его своей LLM, а ответ передаёте обратно через рендерер OpenUI потоком. Есть отдельная поддержка LangChain/LangGraph, которая передаёт данные потоком по протоколу AG-UI.
Может ли модель генерировать любой интерфейс, какой захочет?Нет, вывод ограничен только теми компонентами, которые вы явно определили и зарегистрировали, поэтому модель может создавать интерфейс только из вашей одобренной библиотеки компонентов, а не произвольную разметку.
Какие фронтенд-фреймворки поддерживаются?Есть официальные привязки для React, Vue 3, Svelte 5 и Angular, а также сборка для браузера для использования без сборки и через CDN, и пакеты ядра, не привязанные к фреймворку, для всего остального.
Почему OpenUI Lang эффективнее JSON?OpenUI Lang — это компактный синтаксис, удобный для потоковой передачи, вместо JSON. По замерам он использует до 67% меньше токенов в протестированных сценариях интерфейса (например, 294 токена против 893 для формы обратной связи), что также снижает задержку, так как для передачи нужно меньше токенов.
Чем OpenUI отличается от json-render от Vercel или A2UI от Google?OpenUI заявляет примерно 1x токенов против 3x у json-render от Vercel и A2UI от Google, а также меньшую задержку (4,9 с против 14,2 с при 60 токенах/с). Кроме того, у OpenUI есть встроенная загрузка данных и интерфейс чата, которых нет у этих альтернатив.
Какие пакеты входят в состав OpenUI?Есть ядро, не привязанное к фреймворку (@openuidev/lang-core), отрисовщики для React/Vue/Svelte/Angular, коннектор LangChain/AG-UI, сборка для браузера, клиент A2UI, серверные утилиты, приёмники для наблюдаемости и CLI для создания проектов.
Есть ли у OpenUI официальный токен или криптовалюта?Нет. В README прямо указано, что у OpenUI нет официальной криптовалюты, токена или монеты, а любые активы с названием OpenUI не связаны с мейнтейнерами и не одобрены ими.
Creator
thesysdev
Size
413.3 MB
Stars
11.4K
Age
1y
Commits · 90 Days