lemonade

Open WebUI

Open WebUI provides a highly polished chat interface in your browser for LLM interaction.

This guide walks through how to connect Lemonade Server to Open WebUI and highlights some great features you can start using right away:

• Image Uploads to Vision-Language Models (VLMs): Upload images for analysis and interaction with your LLM-powered VLMs.
• Built-in Python Code Interpreter: Run and test Python code generated by your LLM directly within the interface.
• Live Preview for Web Development: Preview HTML, CSS, and JavaScript code generated by your LLM using the built-in preview server.

Looking for a house-wide setup? If you want to set up Open WebUI + Lemonade for your whole home’s network, including mobile access, multi-user accounts, persistent chat history, and a custom telemetry dashboard plugin, check out this In-Depth Community Guide.

Demo Video

▶️ Watch on YouTube

Installing Open WebUI

1. We recommend installing Open WebUI into a dedicated Python environment using the following commands:

    pip install open-webui
   

   Note: Open WebUI also provides a variety of other installation options, such as Docker, on their GitHub.

2. Run this command to launch the Open WebUI HTTP server:

    open-webui serve
   

3. In a browser, navigate to http://localhost:8080/

4. Open WebUI will ask you to create a local administrator account. You can fill any username, password, and email you like. Once you are signed in, you will see the chat interface:

   

Configuring Open WebUI

1. Install and run Lemonade Server. Download here.

2. Add Lemonade Server as a “connection” in Open WebUI using the following steps:
   1. Click the circular user profile button in the top-right of the UI, then click Settings:
      
      Opening the settings menu.</br>
   2. Click “Connections”, then click the “+” button:
      
      Navigating to the connection settings.</br>
   3. Fill in the URL field with http://localhost:8000/api/v1 (unless you’re using a different port), API key (this is unused but required, suggest just putting a -), and then click “Save”.
      
      Filling in the connection details for Lemonade Server.</br>
   4. Click “Save” in the settings menu, then exit the settings menu.
3. Apply the suggested settings. These help Open WebUI to be more responsive with local LLMs.
   1. Click the user profile button again, and choose “Admin Settings”.
   2. Click the “Settings” tab at the top, then “Interface” (which will be on the top or the left, depending on your window size), then disable the following:
      • Title Generation
      • Follow Up Generation
      • Tags Generation
      
      Admin Settings</br>
   3. Click the “Save” button in the bottom right of the page, then return to http://localhost:8080.

Using Open WebUI with Lemonade

Now that everything is configured, you are ready to interact with an LLM!

Chat

1. Click the dropdown menu in the top-left of the interface. This will display all of the Lemonade models you have installed. Select one to proceed.
   
   Model Selection</br>

2. Enter a message to the LLM and click send (or hit enter). The LLM will take a few seconds to load into memory and then you will see the response stream in.

   
   Sending a message</br>
   
   LLM response</br>

Vision Language Models

Vision Language Models (VLMs) can take images as part of their input.

1. Install a VLM in Lemonade by opening the Lemonade Model Manager:
   1. Open http://localhost:8000 in your browser.
   2. Select the Model Management tab.

   3. Scroll down until you see a model with the blue VISION label and click the “+” button to install it.

      
      Installing a VLM</br>
2. Return to Open WebUI in your browser and select your VLM in the models dropdown menu.

3. Paste an image into the chat box and type a prompt or question about your image. You can also use the “+” button in the chat box to upload images.

   
   VLM prompt</br>
   
   VLM response</br>

Python Coding

Open WebUI allows you to run Python code generated by an LLM directly within the interface.

Note: only certain Python modules are enabled in Open WebUI. matplotlib is one of our favorites.

1. Ask the LLM to write some Python, then click the Run button at the top of the Python code block.

   
   Ask the LLM to write Python</br>

2. If all goes well, the result of running the Python code will appear below the code block.

   
   Python result</br>

   Note: LLMs often produce incorrect code, so it might take a few chat iterations to fix any bugs. Copy-pasting the Python error message is usually enough to move things along.

HTML Rendering

Open WebUI has a built-in rendering engine for HTML, CSS, and JavaScript pages.

Smaller LLMs can produce simple pages with tasteful styling and basic interactivity, while larger LLMs can accomplish tasks like 3D rendering in 3js.

1. Ask a small LLM to write a simple HTML+CSS page. The preview may pop up automatically, but if it doesn’t you can click the Preview button above the HTML code block:

   
   HTML rendering</br>

2. Ask a large LLM to create a 3D shape using 3js.

   
   3D rendering</br>

Image Generation

Open WebUI supports image generation using Stable Diffusion models through Lemonade Server.

Configuring Image Generation

1. Navigate to Admin > Settings > Images in Open WebUI to configure image generation:
   1. Toggle Image Generation on.
   2. Choose Standard (Open AI) as the Image Generation Engine.
   3. Toggle Prompt Generation on.
   4. For OpenAI-API-Basis-URL, fill in http://localhost:8000/api/v1 (unless you’re using a different port).
   5. Add a character like - for OpenAI-API-Key.
   6. If you want to add more parameters, add them to the text field as JSON. For example: { "steps": 4, "cfg_scale": 1 }. See available parameters at Image Generation (Stable Diffusion CPP).
   7. Add your model name to Model, e.g., SDXL-Turbo.
   8. Click Save.

Allow Image Generation for Model

Enable Image Generation as a capability for your model: 1. Go to Admin > Settings > Models and choose your model. 2. Turn on Image Generation. If you want start chat always with image generation, also toggle the default option.

Option 1: Using Image Generation Switch

To generate an image: 1. Toggle the Image Generation switch in the chat on. 2. Enter your image generation prompt. 3. Click Send.

Option 2: Native Tool-Based Generation (Agentic)

This mode uses tool calling for image generation and is recommended for high-quality models with tool calling capabilities. Normally the models will alter and improve your prompt.

1. Configure your model for native tool calling:
   1. Go to Admin > Settings > Models and choose your model.
   2. Go to Advanced Parameters and toggle Function Calling to Native.

   Note: Open WebUI recommends using native mode only for high-quality models. See Tool Calling Modes for more information. (try out >30B models like GPT-OSS-120B, GLM-4.7-Flash or Qwen-3-Next-80B-A3B)

2. The LLM will automatically call the image generation tool when appropriate based on your prompts.

Conclusion

These are just a few of our favorite ways to try out LLMs in Open WebUI. There are a lot more features to explore, such as voice interaction and chatting with documents, so be sure to check out the Open WebUI documentation and YouTube content.

This site is open source. Improve this page.