explaingit

wandb/openui

22,325TypeScriptAudience · developerComplexity · 2/5MaintainedLicenseSetup · moderate

TLDR

Describe a UI component in plain English and instantly see a working, rendered version. An AI generates the HTML live based on your description, and you can iterate with conversational requests.

Mindmap

mindmap
  root((repo))
    What it does
      Describe UI in English
      AI generates HTML
      Live preview in browser
      Iterate conversationally
    How to use it
      Type component description
      Request modifications
      Convert to React/Svelte
      Copy generated code
    AI providers
      OpenAI
      Claude/Anthropic
      Groq
      Gemini
      Ollama local
    Tech stack
      Python backend
      TypeScript frontend
      Docker deployment
    Use cases
      Rapid prototyping
      Visual experimentation
      Skip repetitive coding

Things people build with this

USE CASE 1

Prototype a new UI component in seconds by describing it in English instead of writing HTML and CSS by hand.

USE CASE 2

Iterate on a design visually by asking the AI to modify colors, sizes, or layout without touching code.

USE CASE 3

Convert a generated component into React, Svelte, or Web Components for use in your existing project.

USE CASE 4

Test multiple design ideas quickly before committing to a final implementation.

Tech stack

TypeScriptPythonDockerReactSvelteWeb Components

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Docker to run the backend AI service and an API key for the generative model.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice and license text.

In plain English

OpenUI is a tool that lets you describe a web interface component in plain English, like "a login form with a blue submit button", and then instantly see a working, rendered version of it in your browser. Instead of manually writing HTML, CSS, and layout code, you type what you want and an AI generates the visual result live. The way it works is straightforward: you give OpenUI a description of a UI element (a button, a form, a card layout, etc.) and it uses a large language model (an AI service that understands and generates text and code) to produce the HTML. You can then ask for modifications in the same conversational way, "make the button larger" or "change the font color", and the AI updates the result. You can also have it convert the generated HTML into other formats used by different frontend frameworks, such as React, Svelte, or Web Components. OpenUI supports connecting to multiple AI providers: OpenAI, Groq, Anthropic (Claude), Gemini, Cohere, Mistral, and locally-running models via Ollama. You supply whichever API key you have, and OpenUI routes to that service. You would use this when you want to prototype a UI quickly without doing the manual coding yourself, or when you're experimenting with what a component should look like before investing time in a polished implementation. It's useful for developers who want to skip the tedium of writing repetitive UI code and for teams testing ideas visually. The backend is written in Python, with TypeScript on the frontend. You can run it via Docker (the recommended approach) or by cloning the repository and running it directly with Python. A development container and Gitpod configuration are also included for contributors.

Copy-paste prompts

Prompt 1
Generate a login form with an email field, password field, and a blue submit button using OpenUI.
Prompt 2
I have an OpenUI-generated component. Convert it to a React component that I can import into my app.
Prompt 3
Create a card layout with an image, title, description, and two action buttons using OpenUI, then modify the button colors to green.
Prompt 4
Use OpenUI to generate a responsive navigation bar with a logo, menu items, and a mobile hamburger menu.
Prompt 5
Generate a product pricing table with three tiers using OpenUI, then ask the AI to highlight the most popular tier.
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.