explaingit

wandb/openui

Analysis updated 2026-06-21

22,277TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

OpenUI lets you describe a web UI component in plain English and instantly see a rendered, working version in your browser, then refine it conversationally, supporting multiple AI providers and export to React, Svelte, or Web Components.

Mindmap

mindmap
  root((openui))
    What it does
      Text to UI generator
      Conversational refinement
      Live browser preview
    AI Providers
      OpenAI Anthropic Groq
      Gemini Mistral Cohere
      Local via Ollama
    Export formats
      React Svelte
      Web Components
    Tech stack
      Python backend
      TypeScript frontend
      Docker deploy
    Audience
      Developers
      UI prototypers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Prototype a login form, card, or button by describing it in plain English without writing any HTML or CSS

USE CASE 2

Iterate on a UI design by chatting, say make the button larger or change the background color, and see it update live

USE CASE 3

Convert a described UI prototype into React, Svelte, or Web Component code ready to paste into your project

USE CASE 4

Quickly test what a component should look like before investing time in a polished implementation

What is it built with?

PythonTypeScript

How does it compare?

wandb/openuinocobase/nocobaset4t5/sweetalert
Stars22,27722,28822,303
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardeasy
Complexity2/54/52/5
Audiencedeveloperpm founderdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Requires an API key for at least one AI provider such as OpenAI or Anthropic, or a local Ollama installation.

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
Using OpenUI (wandb/openui), generate a responsive navigation bar with a logo on the left and three menu items on the right. Then convert the result to a React component.
Prompt 2
I want to prototype a signup form with email and password fields and a gradient submit button using OpenUI. What description should I give it, and how do I run it with Docker?
Prompt 3
How do I connect OpenUI to use Anthropic Claude as the AI provider? Walk me through the setup and API key configuration.
Prompt 4
Using OpenUI, generate a three-tier pricing card component and export it as a Svelte component.
Prompt 5
I am running OpenUI locally with Ollama. Which locally-available models work best for generating UI components, and how do I configure OpenUI to use them?

Frequently asked questions

What is openui?

OpenUI lets you describe a web UI component in plain English and instantly see a rendered, working version in your browser, then refine it conversationally, supporting multiple AI providers and export to React, Svelte, or Web Components.

What language is openui written in?

Mainly TypeScript. The stack also includes Python, TypeScript.

How hard is openui to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is openui for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub wandb on gitmyhub

Verify against the repo before relying on details.