openui Documentation

1. Project Overview & Quickstart (wandb/openui) Copy Chapter

File: README.md Copy Chapter

OpenUI

Building UI components can be a slog. OpenUI aims to make the process fun, fast, and flexible. It's also a tool we're using at W&B to test and prototype our next generation tooling for building powerful applications on top of LLM's.

Overview Copy Chapter

OpenUI let's you describe UI using your imagination, then see it rendered live. You can ask for changes and convert HTML to React, Svelte, Web Components, etc. It's like v0 but open source and not as polished :stuck_out_tongue_closed_eyes:.

Live Demo Copy Chapter

Try the demo

Running Locally Copy Chapter

OpenUI supports OpenAI, Groq, and any model LiteLLM supports such as Gemini or Anthropic (Claude). The following environment variables are optional, but need to be set in your environment for alternative models to work:

• OpenAI OPENAI_API_KEY
• Groq GROQ_API_KEY
• Gemini GEMINI_API_KEY
• Anthropic ANTHROPIC_API_KEY
• Cohere COHERE_API_KEY
• Mistral MISTRAL_API_KEY
• OpenAI Compatible OPENAI_COMPATIBLE_ENDPOINT and OPENAI_COMPATIBLE_API_KEY

For example, if you're running a tool like localai you can set OPENAI_COMPATIBLE_ENDPOINT and optionally OPENAI_COMPATIBLE_API_KEY to have the models available listed in the UI's model selector under LiteLLM.

Ollama Copy Section

You can also use models available to Ollama. Install Ollama and pull a model like Llava. If Ollama is not running on http://127.0.0.1:11434, you can set the OLLAMA_HOST environment variable to the host and port of your Ollama instance. For example when running in docker you'll need to point to http://host.docker.internal:11434 as shown below.

Docker (preferred) Copy Section

The following command would forward the specified API keys from your shell environment and tell Docker to use the Ollama instance running on your machine.

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

Now you can goto http://localhost:7878 and generate new UI's!

From Source / Python Copy Section

Assuming you have git and uv installed:

git clone https://github.com/wandb/openui
cd openui/backend
uv sync --frozen --extra litellm
source .venv/bin/activate
# Set API keys for any LLM's you want to use
export OPENAI_API_KEY=xxx
python -m openui

LiteLLM Copy Chapter

LiteLLM can be used to connect to basically any LLM service available. We generate a config automatically based on your environment variables. You can create your own proxy config to override this behavior. We look for a custom config in the following locations:

1. litellm-config.yaml in the current directory
2. /app/litellm-config.yaml when running in a docker container
3. An arbitrary path specified by the OPENUI_LITELLM_CONFIG environment variable

For example to use a custom config in docker you can run:

docker run -n openui -p 7878:7878 -v $(pwd)/litellm-config.yaml:/app/litellm-config.yaml ghcr.io/wandb/openui

To use litellm from source you can run:

pip install .[litellm]
export ANTHROPIC_API_KEY=xxx
export OPENAI_COMPATIBLE_ENDPOINT=http://localhost:8080/v1
python -m openui --litellm

Groq Copy Chapter

To use the super fast Groq models, set GROQ_API_KEY to your Groq api key which you can find here. To use one of the Groq models, click the settings icon in the nav bar.

Docker Compose Copy Section

DISCLAIMER: This is likely going to be very slow. If you have a GPU you may need to change the tag of the ollama container to one that supports it. If you're running on a Mac, follow the instructions above and run Ollama natively to take advantage of the M1/M2.

From the root directory you can run:

docker-compose up -d
docker exec -it openui-ollama-1 ollama pull llava

If you have your OPENAI_API_KEY set in the environment already, just remove =xxx from the OPENAI_API_KEY line. You can also replace llava in the command above with your open source model of choice (llava is one of the only Ollama models that support images currently). You should now be able to access OpenUI at http://localhost:7878.

If you make changes to the frontend or backend, you'll need to run docker-compose build to have them reflected in the service.

Development Copy Chapter

A dev container is configured in this repository which is the quickest way to get started.

Codespace Copy Section

Choose more options when creating a Codespace, then select New with options.... Select the US West region if you want a really fast boot time. You'll also want to configure your OPENAI_API_KEY secret or just set it to xxx if you want to try Ollama (you'll want at least 16GB of Ram).

Once inside the code space you can run the server in one terminal: python -m openui --dev. Then in a new terminal:

cd /workspaces/openui/frontend
npm run dev

This should open another service on port 5173, that's the service you'll want to visit. All changes to both the frontend and backend will automatically be reloaded and reflected in your browser.

Ollama Copy Section

The codespace installs ollama automaticaly and downloads the llava model. You can verify Ollama is running with ollama list if that fails, open a new terminal and run ollama serve. In Codespaces we pull llava on boot so you should see it in the list. You can select Ollama models from the settings gear icon in the upper left corner of the application. Any models you pull i.e. ollama pull llama will show up in the settings modal.

Gitpod Copy Section

You can easily use Open UI via Gitpod, preconfigured with Open AI.

On launch Open UI is automatically installed and launched.

Before you can use Gitpod:

• Make sure you have a Gitpod account.
• To use Open AI models set up the OPENAI_API_KEY environment variable in your Gitpod User Account. Set the scope to wandb/openui (or your repo if you forked it).

NOTE: Other (local) models might also be used with a bigger Gitpod instance type. Required models are not preconfigured in Gitpod but can easily be added as documented above.

Resources Copy Section

See the readmes in the frontend and backend directories.

File: backend/README.md Copy Chapter

OpenUI

A backend service for generating HTML components with AI

Installation Copy Chapter

Clone this repo, then install using pip. You'll probably want to create a virtual env.

git clone https://github.com/wandb/openui
cd openui/backend
pip install .

Usage Copy Chapter

You must set the OPENAI_API_KEY even if you just want to try Ollama models. Just set it to xxx in that case like below.

OPENAI_API_KEY=xxx python -m openui

Docker Copy Section

You can build and run the docker file from the /backend directory:

docker build . -t wandb/openui --load
docker run -p 7878:7878 -e OPENAI_API_KEY wandb/openui

Development Copy Chapter

First be sure to install the package as editable, then passing --dev as an argument will live reload any local changes.

pip install -e .
python -m openui --dev

Now install the dependencies and test dependencies:

pip install -e '.[test]'

To run the tests:

pytest

Evaluation Copy Chapter

The eval folder contains scripts for evaluating the performance of a model. It automates generating UI, taking screenshots of the UI, then asking gpt-4-vision-preview to rate the elements. More details about the eval pipeline coming soon...

Google Vertex AI Copy Chapter

Create a service account with the appropriate permissions and authenticate with:

gcloud auth application-default login --impersonate-service-account ${GCLOUD_SERVICE_ACCOUNT}@${GCLOUD_PROJECT}.iam.gserviceaccount.com

File: frontend/README.md Copy Chapter

OpenUI Frontend

This is the frontend for OpenUI. It's built using vite, React, and Tailwind CSS as a SPA.

Development Copy Chapter

pnpm install
pnpm run dev

In a separate terminal navigate to the backend directory and run:

cd openui/backend
pip install -e .
python -m openui --dev

All changes should now be live reloaded, god speed.

2. Official Technical Reference & Guides (wandb/docs) Copy Chapter

Weights & Biases Documentation

[!IMPORTANT]
This repository is locked while we move the documentation source to CoreWeave infrastructure. It doesn't accept new pull requests or issues. The published documentation at https://docs.wandb.ai/ remains available. The contribution instructions in the rest of this file no longer apply.

The Weights & Biases Docs (https://docs.wandb.ai/) is built using Mintlify, a static website generator. The high level overview of the doc writing process is:

1. Edit the desired files.
2. Create a pull request proposing your changes.
3. Confirm that all CI checks pass to ensure that your changes don’t break the docs.
4. Respond to feedback from the W&B docs team and CI checks.

After this, someone from the docs team will merge the PR and it will go live in a matter of minutes!

Quickstart Copy Chapter

This section shows how to edit a page or report a bug from within your browser without cloning the repository or installing anything locally. To edit multiple files or build the documentation locally, refer to the Prerequisites and the following sections.

Edit a page Copy Section

1. To edit a page you're reading on docs.wandb.ai, scroll to the bottom of the page and click Edit page to open the Markdown file in the GitHub editor.

   To edit a page from https://github.com/wandb/docs, browse to or search for the page, then click the pencil icon to open the Markdown file in the GitHub editor.

2. Edit the page, then click Commit changes. In the dialog, choose to create a new branch, then specify:

   • A name for the branch
   • A commit message that describes the change. By default, this becomes the pull request title.
   • An optional extended description. By default, this becomes the pull request body.

3. Click Propose change. A new branch is created with the commit you just created. A new dialog opens where you can create a pull request.

4. Optionally edit the pull request's title and description. Markdown is allowed. You can refer to a PR or issue by number or URL, and you can refer to a JIRA issue by its ID.

5. Click Create pull request. A member of @docs-team reviews your changes, provides feedback, and works with you to merge the change.

Report a bug Copy Section

If you work for CoreWeave or Weights & Biases, file a doc JIRA, using the template at https://coreweave.atlassian.net/jira/core/projects/WBDOCS/form/2725.

To report a bug on a page you're reading on docs.wandb.ai:

1. Scroll to the bottom of the page and click Report issue.
2. Provide a title and optionally edit the description, then click Create.

To report a bug from https://github.com/wandb/docs:

1. Click the Issues tab.
2. Click New issue. Optionally select a template, then click Create.
3. Provide a title and a description. If applicable, include the URL of the page with the bug. Click Create.

Prerequisites Copy Chapter

The mint CLI is required for local builds. See https://www.mintlify.com/docs/installation. Install it from npx or from Homebrew.

macOS Copy Section

After cloning this repo:

1. cd into the clone.

2. Create a working branch:

   shell Copy

   git checkout -b my_working_branch origin/main

3. Build and serve the docs locally:

   shell Copy

   mint dev

   By default, content is served from https://localhost:3000/.

4. Check for broken links and images:

   shell Copy

   mint broken-links

5. Push your branch to origin:

   shell Copy

   git push origin my_working_branch

6. The first time you push a new branch, the terminal output includes a link to create a PR. Click the link and create a draft PR. CI tests will run.

7. When you are satisfied with your PR and all tests pass, click Ready for review to convert the draft PR to a reviewable PR. A member of the W&B docs team will review your changes and give feedback.

8. When all feedback is addressed and the PR is approved, the reviewer will merge the PR.

Exiting `mint dev` Copy Chapter

To interrupt the Mintlify server, type CTRL+C in the terminal where it is running.

Mintlify compatibility Copy Chapter

Mintlify processes Markdown files in .mdx format, which has stricter requirements than .md. If a file contains incompatible Markdown, mint dev will fail and mint broken-links will show errors. For example, HTML comments (``) are not supported. Instead, use this syntax for comments: {/* like this */}.

For general guidelines, refer to the Create content section of the Mintlify documentation. For example:

• Format text
• Lists and tables
• Images and embeds
• Callouts
• Cards
• Tabs

This list of links is not exhaustive. Check the Mintlify documentation for full details.

How to edit the docs locally Copy Chapter

1. Navigate to your local clone of this repo and pull the latest changes from main:

   bash Copy

   git pull origin main

2. Create a feature branch off of main.

   bash Copy

   git checkout -b <your-feature-branch>

3. After installing the prerequisites documented above, start a local preview of the docs.

   bash Copy

   mint dev

   This will return the localhost URL and port number where you can preview your changes to the docs as you make them (e.g. https://localhost:3000).

4. Make your changes on the new branch.

5. Check your changes are rendered correctly. Any time you save a file, the preview automatically updates.

6. Commit the changes to the branch.

   bash Copy

   git add .
   git commit -m 'Useful commit message.'

7. Push the branch to GitHub.

   bash Copy

   git push origin <your-feature-branch>

8. Open a pull request from the new branch to the original repo.

What files do I edit? Copy Chapter

You can edit most .mdx files in the repo directly. Content in a few directories is generated from upstream code. Edit the code in the source repo, not in wandb/docs. After your upstream change is merged and released, when the relevant content is next generated, your change will be included.

AI resources Copy Chapter

The AGENTS.md file contains guidance and style conventions specifically designed for AI agents working with this repository. This includes:

• Project context and your role as a W&B docs team member
• Core principles for writing clear, accurate documentation
• Comprehensive style guide with examples
• Code formatting standards and best practices
• Collaboration guidelines

For complex, multi-step procedures, see the runbooks/ directory which contains step-by-step instructions for tasks like testing GitHub Actions changes.

If you're using an AI agent to help with documentation tasks, provide AGENTS.md as context to ensure consistent, high-quality contributions.

License Copy Chapter

The source for this documentation is offered under the Apache 2.0 license.

Notices Copy Chapter

• LICENSE
• CODE_OF_CONDUCT.md
• CONTRIBUTING.md
• SECURITY.md
• THIRD-PARTY-NOTICES.txt

Attributions Copy Chapter

• This project uses Mintlify. License
• A dependency of Docsy is the caniuse-lite package, offered under CC-BY-4.0. License
• Another dependency of Docsy is Font Awesome Free, offered under the CC-BY-4.0, SIL OFL 1.1, and MIT licenses. License notice
• This site is built using Hugo, a static site generator. License