NiceGUI — Build Web UIs with Python, the Nice Way

What it is

NiceGUI is a Python framework for building web-based user interfaces with minimal boilerplate. It provides a rich set of UI components -- buttons, inputs, tables, charts, 3D scenes, markdown, and more -- that you compose with simple Python function calls. The UI updates in real time via WebSocket connections, and the framework handles the entire web stack.

It targets Python developers who need to build quick UIs for internal tools, data dashboards, AI demos, and lab instruments without learning frontend technologies.

How it saves time or tokens

NiceGUI reduces the code needed for a functional web UI to a few lines of Python. Instead of setting up a React project, configuring a build pipeline, and writing API endpoints, you write Python and get a live-updating UI instantly. For AI applications, you can build model demo interfaces, parameter tuning panels, and result visualizers in minutes rather than hours.

How to use

1. Install and run:

pip install nicegui

1. Create a basic UI:

from nicegui import ui

ui.label('Hello NiceGUI')
ui.button('Click me', on_click=lambda: ui.notify('Clicked'))

ui.run()

1. Build an interactive dashboard:

from nicegui import ui

slider = ui.slider(min=0, max=100, value=50)
ui.label().bind_text_from(slider, 'value', backward=lambda v: f'Value: {v}')

with ui.card():
    ui.chart({'title': False, 'series': [{'data': [1, 3, 2, 5, 4]}]})

ui.run()

Example

from nicegui import ui
from openai import OpenAI

client = OpenAI()
messages = []

async def send():
    user_msg = input_field.value
    messages.append({'role': 'user', 'content': user_msg})
    chat_log.push(f'You: {user_msg}')
    input_field.value = ''
    
    response = client.chat.completions.create(
        model='gpt-4o', messages=messages
    )
    answer = response.choices[0].message.content
    messages.append({'role': 'assistant', 'content': answer})
    chat_log.push(f'AI: {answer}')

with ui.card().classes('w-96'):
    ui.label('AI Chat').classes('text-xl')
    chat_log = ui.log(max_lines=20).classes('w-full h-64')
    with ui.row().classes('w-full'):
        input_field = ui.input(placeholder='Ask something...').classes('flex-grow')
        ui.button('Send', on_click=send)

ui.run()

Related on TokRepo

• AI tools for coding -- Developer tools and frameworks
• Featured workflows -- Curated developer tools and configurations

Common pitfalls

• NiceGUI runs a web server on your machine. For multi-user production apps, configure proper authentication and consider deploying behind a reverse proxy.
• Complex layouts may require understanding the underlying Quasar/Vue.js components. Most common UIs work out of the box, but custom styling needs CSS knowledge.
• State management is server-side. Each connected browser has its own state. For shared state across users, use a database or shared data structure.