OpenUI: Build UI Components with AI by Weights & Biases

Every web developer has experienced the friction of turning a design idea into working code. You know what the component should look like — a clean pricing table, an elegant navigation bar, a responsive card layout — but translating that mental image into CSS is a time-consuming process of adjusting margins, tweaking colors, and fixing layout breaks at different viewport sizes.

OpenUI, developed by Weights & Biases, removes this friction. It is an open-source tool that generates UI components from natural language descriptions, renders them in a live preview, and lets you refine the design through conversation. Describe a component, see it rendered instantly, iterate verbally, and copy the resulting code into your project. It turns UI development into a conversation between you and AI.

How Does OpenUI Generate UI Components from Descriptions?

OpenUI’s generation pipeline combines LLM-powered code generation with live rendering. When you describe a component, the system sends your description to a large language model, which generates HTML, CSS, and JavaScript implementing the described UI.

The generated code is rendered in a live preview pane within the OpenUI interface. This immediate visual feedback is critical — you see exactly what the code produces, identifying layout issues, color mismatches, or responsiveness problems immediately. The preview updates as you iterate on the design.

The code generation is not a one-shot process. After seeing the initial result, you can request specific changes — “reduce the padding,” “use a dark theme,” “add an animation on hover.” Each iteration refines the component while preserving your previous requirements, building toward the exact design you envisioned.

What Makes OpenUI’s Iteration Loop Powerful?

The iteration loop is where OpenUI’s value compounds. Traditional UI development requires editing CSS, refreshing the browser, evaluating the result, and looping. Each cycle takes at least 30 seconds of context switching. OpenUI compresses this into a continuous conversation.

After generating a component, you can request changes in natural language. “Make the primary button larger with a gradient background.” “Add a subtle box shadow to the cards.” “Change the font family to Inter.” Each request generates updated code and refreshes the preview. You can go through 10-20 iterations in the time it would take to make 2-3 manual CSS adjustments.

flowchart LR
    A[Describe Component:<br/>"Pricing table with 3 tiers"] --> B[AI Code Generation]
    B --> C[Live Preview]
    C --> D[User Evaluation]
    D --> E{Satisfied?}
    E -->|No| F[Refinement Request:<br/>"Make cards rounded"]
    F --> B
    E -->|Yes| G[Copy Code]
    G --> H[Paste into Project]
    H --> I[Production Component]

Each refinement is versioned. OpenUI maintains a history of generated versions, letting you compare the current version with previous iterations. If a refinement goes in the wrong direction, you can revert to an earlier version and try a different approach. This freedom to explore alternatives without losing progress is liberating for design exploration.

How Does OpenUI Handle Different UI Frameworks?

OpenUI supports generating components in multiple output frameworks. The default is Tailwind CSS with HTML, but you can switch to React components, Vue single-file components, Svelte, or plain CSS. The framework selection is configured before generation and can be changed mid-session.

The framework support is not superficial — OpenUI generates idiomatic code for each framework. React components use hooks, props, and proper JSX patterns. Vue components follow the composition API with script setup syntax. Svelte components use reactive declarations and stores where appropriate. The generated code looks like it was written by an experienced developer in that framework.

For projects using design systems, OpenUI can be configured to use specific color palettes, typography scales, and component conventions. You describe your design tokens once, and all generated components use those tokens consistently.

How Do You Run OpenUI Locally?

OpenUI is designed for local deployment. The recommended approach is Docker: docker run -p 7878:7878 ghcr.io/wandb/openui:latest. This starts the OpenUI server with a built-in LLM backend or configurable connection to external AI providers.

For development and customization, the source code is available on GitHub and can be run directly with Python. The architecture is a Python backend (FastAPI) with a TypeScript frontend (React). The backend handles LLM interaction, code generation, and session management. The frontend provides the chat interface and live preview.

OpenUI supports multiple LLM backends. By default, it uses Weights & Biases’ hosted AI service, but you can configure it to use OpenAI, Anthropic, or local models via Ollama. The local model option ensures complete data privacy — all code generation happens on your machine.

The flexibility of LLM backend choice makes OpenUI suitable for organizations with privacy requirements. Sensitive UI designs can be generated using local models, ensuring no design data leaves the organization’s infrastructure.

FAQ

What is OpenUI and how does it work? OpenUI is an open-source tool by W&B that generates UI components from natural language descriptions, with live preview and conversational refinement.

What frameworks does OpenUI support? React/JSX, Vue/SFC, Svelte, SolidJS, Tailwind CSS, Bootstrap, Material UI, and plain HTML/CSS with idiomatic code generation.

How does iterative refinement work? After generating a component, you request changes conversationally. Each iteration updates the code and preview while preserving previous design choices.

Can I use the generated code in production? Yes. The generated code is production-quality, follows best practices, and can be copied directly into your project.

Is OpenUI free? Yes. OpenUI is fully open source under Apache 2.0, with no usage limits or paid tiers. Run locally via Docker or Python.

References

• OpenUI GitHub Repository
• Weights & Biases
• OpenUI Docker Image
• AI-Powered UI Development