Devlog #2: A simple chat UI for Ollama with NiceGUI

A simple and effective user interface for local AI

Mai 21, 2025

In my last devlog, I introduced the QV Ollama SDK, which allows you to have conversations with local LLMs. I used Ollama as the backend. Today I would like to show how I built a simple but effective user interface for it.

Why NiceGUI?

So far, I have mostly used TypeScript frameworks for user interfaces, such as React. This time, however, I was looking for a Python solution and found NiceGUI. I was a bit skeptical at first, but as I got to know the Python framework, my enthusiasm grew. It is based on Vue and Quasar. It finds a good middle ground between magic (which makes development easier) and fundamental building blocks to build real custom things. So, here's how the simple UI is structured.

The structure

The chat application consists of three main parts:

a header with model selection and settings
a chat area that displays the conversation
a footer with input field and send button

The code is divided into small, focused components. This makes the application easy to maintain and expand.

The implementation

The main application file is quite simple. It sets up the basic structure and connects all components:

```python

@ui.page('/')

def main():

    # initialize manager

    model_manager = ModelManager()

    chat_manager = ChatManager(model_manager)

    dialog_manager = DialogManager(model_manager, chat_manager)

    # Create header

    create_header(dialog_manager, model_manager)

    # Main area

    with ui.column().classes(f'w-full max-w-{MAX_WIDTH} {MARGIN_X} {MARGIN_Y}'):

        chat_manager.chat_messages()

        ui.timer(UI_REFRESH_INTERVAL, chat_manager.chat_messages.refresh)

    # Create footer

    create_footer(chat_manager)

```

The chat interface automatically refreshes every 0.1 seconds to display new messages. This ensures a smooth experience when receiving replies from the LLM.

The chat experience

The chat interface is designed to be simple and intuitive:

Messages appear in a clean, modern layout
The input field is always visible at the bottom
Messages can be sent by clicking on the Send button or by pressing Enter
The conversation history is saved automatically

The current implementation provides a solid foundation that can be expanded as required.

You can find the complete code in the GitHub repository:

[QV Ollama Simple UI]

There you will also find the other code modules that you can view and how to start the UI.

See you next time,

Thomas from the Quantyverse

P.S.: Visit my website Quantyverse.ai for products, bonus content, blog posts and more

Quantyverse