From Idea to UI in Seconds: Meet OpenUI!

I’ll start with a simple example. Many times, I’ve imagined a dress that would look amazing, but when I actually found something similar, it didn’t turn out as expected. This isn’t just a personal problem — it happens in coding too. A client may imagine a UI that seems great in their head, but when it’s built, it doesn’t look as expected. The downside? Time and resources wasted, along with potential client dissatisfaction.

Luckily, this problem now has a solution. Weights & Biases (W&B) has developed OpenUI, an open-source tool that turns your imagination into a prototype using simple English commands. UI creation becomes fast, fun, and flexible. You can also convert the designs into code for frameworks like React, Svelte, or Web Components. For example, I can say, “Create a dark-themed dashboard with a sidebar and charts,” and OpenUI will generate it live. You can also edit it using simple English commands.

In this article, we’ll explore why OpenUI matters, how it works, and how you can use it to create amazing UIs in seconds.

Why OpenUI?

• Natural Language UI Creation: You don’t have to be a pro coder to get started. Just describe what you want, and OpenUI does the rest.
• See Changes Live: As you adjust your description, the UI updates instantly—similar to a live preview in web development, but without manually writing or editing code.
• Flexible Output: Once you’re happy with your design, you can convert it into code for popular frameworks, making it easy to use in real projects.
• Open Source: It’s free to use, and the community can contribute to improvements.

How Does OpenUI Work?

 
There’s no rocket science behind the implementation, but the idea is brilliant—and you could even build something similar yourself! It uses language models like those from OpenAI, Groq, or open-source options like Ollama to understand descriptions and generate HTML code. From there, you can edit, refine, or convert it into the framework of your choice.

Getting Started with OpenUI

 
Let’s try it out. You have a few options depending on your setup, but don’t worry—we’ll keep it simple!
 

Option 1: Try the Live Demo

The easiest way to explore OpenUI is through its live demo at OpenUI Demo. Just log in with your GitHub account. For example, I asked it to generate a UI for “A red card with a title and a button,” and here’s what I got:
 

 
You can toggle between light and dark mode, preview the UI on different screens, select a theme, or make edits as needed. Clicking the icon reveals the HTML code for your UI, as shown in the screenshot above.

Option 2: Run It Locally with Docker

If you want to run OpenUI on your own computer, Docker provides the easiest setup. It is just like a pre-packaged box that contains everything OpenUI needs to run. Here’s how you can do it.

1. Install Docker: Download and install Docker Desktop for your computer (Windows, Mac, or Linux).
2. Get an API Key: OpenUI supports multiple models (OpenAI, Groq, Anthropic, Gemini, Cohere, Mistral, etc.). I’ll use an OpenAI API key. Sign up for a free key and save it.
3. Run the Command: Open your terminal and paste this:

(Replace xxx with your API key):
export OPENAI_API_KEY=xxx
docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY ghcr.io/wandb/openui

 
It will take a few moments to download.
 

 

4. Open Your Browser: Once it’s ready, visit http://localhost:7878, and you can start creating UIs just like in the live demo.

Option 3: Run from Source (For the Curious)

If you want to run OpenUI from its source code, you need Git and uv (a fast Python package manager).

1. Clone the project:

git clone https://github.com/wandb/openui

 

2. Navigate to the folder:

 

3. Sync dependencies and activate the virtual environment using:

uv sync --frozen --extra litellm
source .venv/bin/activate

 

4. Set up the environment and run it using this command:

export OPENAI_API_KEY=your_openai_key
python -m openui

 

Advanced Setup Options

 
Ollama Setup (For Open-Source Models)

1. Install Ollama.
2. Pull a model (e.g., llava for image support):

docker exec -it openui-ollama-1 ollama pull llava

 

3. Run OpenUI with Ollama:

docker run --rm --name openui -p 7878:7878 -e OLLAMA_HOST=http://host.docker.internal:11434 ghcr.io/wandb/openui

 

Wrapping Up

 
So, what are you waiting for? Head over to the OpenUI GitHub page, try the demo, or set it up locally. Describe, edit, and convert your way to awesome UIs. Here are few more tips for your reference:

• The more details you give (“a purple button with white text”), the better the result
• Try different descriptions and add complexity gradually to see what happens
• Use common UI terminology when possible
• Click the gear icon to switch between AI models (like Groq for speed or Ollama for local use)

Kanwal Mehreen Kanwal is a machine learning engineer and a technical writer with a profound passion for data science and the intersection of AI with medicine. She co-authored the ebook “Maximizing Productivity with ChatGPT”. As a Google Generation Scholar 2022 for APAC, she champions diversity and academic excellence. She’s also recognized as a Teradata Diversity in Tech Scholar, Mitacs Globalink Research Scholar, and Harvard WeCode Scholar. Kanwal is an ardent advocate for change, having founded FEMCodes to empower women in STEM fields.