Mesop — Build AI Apps Fast with Python UI

What it is

Mesop is an open-source Python UI framework created by Google for building AI applications quickly. It provides pre-built components for common AI app patterns -- chat interfaces, text input/output flows, and interactive dashboards -- that you compose with Python decorators and functions. The framework runs a web server and renders the UI in the browser.

It targets AI engineers and researchers who want to build interactive demos and internal tools for their models without learning frontend development.

How it saves time or tokens

Mesop provides ready-made AI app patterns out of the box. A chat interface that would take hours to build in React takes a few lines of Mesop code. The framework handles state management, event handling, and rendering automatically. For AI teams, this means faster prototyping: you can wrap any model behind a user-friendly interface in minutes and share it with stakeholders.

How to use

1. Install and create an app:

pip install mesop

1. Build a simple page:

import mesop as me

@me.page(path='/')
def home():
    me.text('Welcome to my AI App')
    me.button('Get Started', on_click=lambda e: me.navigate('/chat'))

me.run()

1. Build a chat interface:

import mesop as me
import mesop.labs as mel

def respond(query: str, history: list) -> str:
    # Connect to your LLM here
    return f'You asked: {query}'

@me.page(path='/chat')
def chat_page():
    mel.chat(respond, title='AI Assistant')

Example

import mesop as me
import mesop.labs as mel
from openai import OpenAI

client = OpenAI()

def ai_respond(query: str, history: list) -> str:
    messages = [{'role': 'user', 'content': query}]
    for h in history:
        messages.insert(0, {'role': h['role'], 'content': h['content']})
    
    response = client.chat.completions.create(
        model='gpt-4o',
        messages=messages
    )
    return response.choices[0].message.content

@me.page(path='/')
def main():
    mel.chat(
        ai_respond,
        title='AI Chat Demo',
        bot_user='Assistant'
    )

Related on TokRepo

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

Common pitfalls

• Mesop is optimized for prototyping and internal tools. For high-traffic production apps with complex UIs, a full framework like Next.js or Reflex may be more appropriate.
• The component library is focused on common AI app patterns. Custom or highly styled UIs may require workarounds or CSS overrides.
• Mesop's state model re-renders the entire page on state changes. For apps with frequent updates (like streaming), this can cause flickering if not handled carefully.