# wandb/openui

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/wandb-openui).**

22,415 stars · 2,058 forks · TypeScript · Apache-2.0

## Links

- GitHub: https://github.com/wandb/openui
- Homepage: https://openui.fly.dev
- awesome-repositories: https://awesome-repositories.com/repository/wandb-openui.md

## Topics

`ai` `generative-ai` `html-css-javascript` `tailwindcss`

## Description

OpenUI is an AI design sandbox and natural language prototyping tool used to generate and render live user interface components from text descriptions. It functions as an LLM UI generator that translates natural language into executable HTML and CSS code.

The system provides a pipeline for iterative refinement, allowing users to update existing interfaces by feeding previous code versions and new instructions back into the model. It also acts as a frontend framework converter, transforming HTML markup into different library formats to maintain styling consistency across various web frameworks.

The platform includes a sandboxed environment for live component rendering to provide immediate visual feedback. It manages connections to external AI providers and local runners through configuration files and system environment variables.

## Tags

### Development Tools & Productivity

- [LLM-Driven](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-config-code-generation/code-generation/llm-driven.md) — Translates natural language descriptions into executable HTML and CSS code using LLMs.
- [Rapid Prototyping Environments](https://awesome-repositories.com/f/development-tools-productivity/rapid-prototyping-environments.md) — Provides a rapid environment for visualizing interface ideas from plain English descriptions in real time.

### User Interface & Experience

- [Natural Language Prototyping Tools](https://awesome-repositories.com/f/user-interface-experience/natural-language-prototyping-tools.md) — Provides a complete environment for visualizing and iterating on interface ideas using plain English descriptions and real-time rendering.
- [Sandboxed Web Prototypes](https://awesome-repositories.com/f/user-interface-experience/design-prototyping-tools/sandboxed-web-prototypes.md) — Provides an interactive sandboxed environment for prototyping web interfaces through iterative text prompts.
- [Component Sandboxes](https://awesome-repositories.com/f/user-interface-experience/isolated-ui-components/component-sandboxes.md) — Executes generated frontend code within an isolated sandbox for safe and immediate visual feedback.
- [Live Preview Renderers](https://awesome-repositories.com/f/user-interface-experience/live-preview-renderers.md) — Renders generated frontend code in real-time to provide immediate visual feedback.
- [Natural Language Component Generators](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/ui-component-guidelines/natural-language-component-generators.md) — Generates complete user interface components from natural language descriptions. ([source](https://cdn.jsdelivr.net/gh/wandb/openui@main/README.md))
- [Cross-Framework Components](https://awesome-repositories.com/f/user-interface-experience/cross-framework-components.md) — Generates markup that can be adapted across multiple frontend frameworks to maintain styling consistency.
- [Code Transformers](https://awesome-repositories.com/f/user-interface-experience/cross-framework-components/code-transformers.md) — Provides a mechanism to transform generated HTML markup into various frontend library formats.

### Artificial Intelligence & ML

- [Generative UI Tools](https://awesome-repositories.com/f/artificial-intelligence-ml/generative-ui-tools.md) — Automatically generates user interface code and design assets from natural language prompts using LLMs.
- [Natural Language Interface Generators](https://awesome-repositories.com/f/artificial-intelligence-ml/natural-language-interface-generators.md) — Generates live UI layouts and components from natural language requirements.
- [Language Model Integrations](https://awesome-repositories.com/f/artificial-intelligence-ml/artificial-intelligence-tooling/language-model-integrations.md) — Provides adapters and configurations to connect to various hosted or local language model providers. ([source](https://cdn.jsdelivr.net/gh/wandb/openui@main/README.md))
- [LLM Model Integrations](https://awesome-repositories.com/f/artificial-intelligence-ml/generative-ai-resources/generative-ai/llm-model-integrations.md) — Integrates large language models to automate the generation and transformation of frontend code.
- [UI Generation Pipelines](https://awesome-repositories.com/f/artificial-intelligence-ml/natural-language-code-generators/natural-language-code-editing/ui-generation-pipelines.md) — Implements a pipeline that processes conversational text into fully rendered UI components.

### Part of an Awesome List

- [Prompt Iteration](https://awesome-repositories.com/f/awesome-lists/devtools/code-refinement/prompt-iteration.md) — Allows users to incrementally update the user interface by refining natural language instructions.

### Content Management & Publishing

- [Framework Converters](https://awesome-repositories.com/f/content-management-publishing/markdown-to-html-converters/framework-converters.md) — Transforms HTML markup into different frontend library formats to ensure consistent styling across frameworks. ([source](https://cdn.jsdelivr.net/gh/wandb/openui@main/README.md))

### Web Development

- [Frontend Code Converters](https://awesome-repositories.com/f/web-development/frontend-code-converters.md) — Transforms HTML markup into different frontend library formats to maintain styling across frameworks.
- [Frontend Framework Migration Tools](https://awesome-repositories.com/f/web-development/frontend-framework-migration-tools.md) — Converts existing HTML markup into different frontend formats to facilitate framework migration.
- [HTML to Framework Converters](https://awesome-repositories.com/f/web-development/html-to-framework-converters.md) — Converts HTML markup into various frontend framework formats to preserve consistent styling.