Exploring Mesop: A Comprehensive Python Web Framework Beyond Streamlit for AI and ML Applications

8 min readAug 4, 2024

Today, I discovered Mesop, a Python-centric web framework developed by Google. As someone who has previously used Streamlit for building ML and data science applications, I was intrigued by Mesop’s unique features and approach. Unlike Streamlit, which excels at creating data-driven dashboards and interactive reports with minimal code, Mesop offers a more comprehensive set of tools for building fully-fledged web applications. It allows for the use of Python to define both the frontend and backend components, eliminating the need to write HTML, CSS, or JavaScript.

One of the standout features of Mesop is its declarative UI model, which streamlines the development process by managing the rendering of UI components based on the application’s state. This approach simplifies the development of complex user interfaces and enhances code maintainability. Moreover, Mesop’s integration with machine learning and AI components provides a robust platform for creating interactive demos and internal tools that leverage advanced AI capabilities.

In contrast, while Streamlit focuses primarily on data visualization and user interfaces for data-driven applications, Mesop’s extensibility and flexibility allow it to be used for a broader range of applications, including those that require custom UI components or integration with JavaScript libraries. Additionally, Mesop’s seamless deployment capabilities make it easy to share applications via cloud platforms like Google Cloud Run.

Mesop is a web framework developed by Google for creating web applications with a focus on simplicity and efficiency, particularly for machine learning (ML) and artificial intelligence (AI) demos, as well as internal tools.

Here are some key aspects of Mesop:

Development Simplicity: Mesop allows developers to build web applications entirely in Python, without needing to delve into HTML, CSS, or JavaScript. It achieves this by using a declarative UI approach and leveraging Angular components on the client side. This design simplifies the process of creating and maintaining web applications, making it accessible even for those without frontend experience.

Components and Features: The framework offers a variety of pre-built and user-defined components. High-level components, such as chat interfaces and text-to-image generators, are available for quickly building applications. It also includes layout components for structuring the app’s interface, such as containers and navigation menus.

State Management and Control Flow: Mesop provides state management capabilities, allowing developers to maintain and manipulate the state of their applications efficiently. It supports features like hot reload and streaming UI, enhancing the developer experience by providing instant feedback and updates during development.

Deployment and Extensibility: Mesop is designed to be easily deployable to cloud services like Google Cloud Run, making it convenient for sharing and scaling applications. Additionally, it supports integration with JavaScript web components, enabling the use of external libraries and enhancing the framework’s flexibility.

Use Cases: Mesop is particularly well-suited for creating prototypes, internal tools, and AI/ML demos. However, it might not be ideal for highly demanding consumer-facing applications that require extensive performance optimizations and custom UI components.

Mesop vs Streamlit

The choice between Mesop and Streamlit depends on your project’s requirements and your team’s expertise. If you need to quickly develop a data-driven application with minimal coding and are okay with limited customization, Streamlit is an excellent choice. If you require a highly customizable and feature-rich application with more control over design and functionality, Mesop may be more appropriate.

Mesop and Streamlit are both frameworks used for creating web applications, but they differ in terms of their features, target audience, and use cases. Here’s a comparison:

Streamlit Overview:

Streamlit is an open-source Python library that allows data scientists and machine learning engineers to create interactive web applications with minimal effort.
It is designed to turn data scripts into shareable web apps in a few lines of code.

Key Features:

Ease of Use: Streamlit is highly user-friendly, allowing for the quick creation of interactive UI elements like sliders, buttons, and text inputs.
Pythonic: Streamlit allows you to use pure Python to create your web app, making it accessible for data scientists familiar with Python.
Real-time Data: It supports real-time data updates, which is useful for apps that need to display live data.
Customization: Streamlit offers some level of customization for layout and design, but it’s generally more focused on functionality than appearance.
Deployment: Apps can be easily deployed to Streamlit’s cloud platform or other cloud services.

Use Cases:

Prototyping machine learning models.
Visualizing data interactively.
Building dashboards and data apps.

Mesop Overview:

Mesop is a relatively new web framework designed for creating rich web applications, focusing on delivering a highly customizable and interactive user experience.

Key Features:

Customization and Flexibility: Mesop offers a high degree of customization, allowing for more intricate design and layout options.
Components and Modules: It provides a range of pre-built components and modules, making it easier to add complex features.
Scalability: It is built with scalability in mind, making it suitable for more extensive and complex applications.

Use Cases:

Developing more complex and customized web applications.
Creating highly interactive and visually rich user interfaces.
Applications that require extensive front-end customization and design.

Comparison:

Ease of Use:

Streamlit: Easier to use, especially for data scientists and ML engineers with basic programming knowledge. It’s straightforward to get started and create functional apps quickly.
Mesop: May require more effort and knowledge of web development, but offers greater flexibility and customization.

Customization:

Streamlit: Limited in customization compared to Mesop. Streamlit prioritizes ease of use over design flexibility.
Mesop: Offers more customization options, making it suitable for projects that require a specific look and feel.

Target Audience:

Streamlit: Ideal for data scientists and machine learning engineers who want to quickly build and deploy interactive data apps.
Mesop: Better suited for web developers and designers looking to create highly customized and feature-rich applications.

Use Case Complexity:

Streamlit: Best for simple to moderately complex applications, especially those focused on data visualization and interaction.
Mesop: Suitable for more complex applications that require advanced features and extensive customization.

EXAMPLES

Here’s a simple example of a Mesop application:

import mesop as me

@me.page()
def main():
    me.text("Welcome to Mesop!")
    if me.button("Click me"):
        me.text("Button clicked!")

if __name__ == "__main__":
    me.run()

Importing Mesop: The mesop library is imported as me.
Defining a Page: The @me.page() decorator defines a function main() as a page. This is where the UI elements of the application are specified.
Adding Text and Button:

me.text("Welcome to Mesop!") adds a simple text element to the page.
me.button("Click me") adds a button with the label "Click me". If the button is clicked, the text "Button clicked!" will appear below it.

4. Running the App

To run the application, you would save this code in a file (e.g., app.py) and execute it using the command:

mesop app.py

Example 2

To demonstrate a more complex front-end application using Mesop, let’s create an example that includes a variety of components, such as a navbar, a form, a data table, and a chart. This example will also utilize state management and provide a visually rich and interactive user experience.

Data Dashboard Application

import mesop as me
import pandas as pd
import matplotlib.pyplot as plt
from io import BytesIO
import base64

# Sample data for the table and chart
data = {
    "Category": ["A", "B", "C", "D"],
    "Value": [10, 15, 7, 12]
}

df = pd.DataFrame(data)

# Function to convert a Matplotlib plot to a base64 string
def plot_to_base64():
    plt.figure(figsize=(5, 3))
    plt.bar(df['Category'], df['Value'], color='skyblue')
    plt.xlabel('Category')
    plt.ylabel('Value')
    plt.title('Sample Data Chart')
    buf = BytesIO()
    plt.savefig(buf, format='png')
    plt.close()
    buf.seek(0)
    return base64.b64encode(buf.read()).decode('utf-8')

# Define the state for the application
@me.stateclass
class State:
    name: str = ""
    age: int = 0
    data: pd.DataFrame = df

# Define the navigation bar component
@me.component
def navbar():
    me.button("Home", path="/")
    me.button("Form", path="/form")
    me.button("Data", path="/data")

# Define the form page
@me.page(path="/form")
def form_page():
    state = me.state(State)
    me.header("User Information Form", size="h3")
    state.name = me.text_input("Name", value=state.name)
    state.age = me.number_input("Age", value=state.age, min=0)
    if me.button("Submit"):
        me.text(f"Hello, {state.name}. You are {state.age} years old.")

# Define the data page
@me.page(path="/data")
def data_page():
    state = me.state(State)
    me.header("Data Table and Chart", size="h3")
    me.dataframe(state.data)
    img_data = plot_to_base64()
    me.image(src=f"data:image/png;base64,{img_data}")

# Define the main page
@me.page(path="/")
def main_page():
    me.header("Welcome to the Data Dashboard", size="h1")
    me.text("Use the navigation bar to access different features.")

# Define the layout
@me.content_component
def layout():
    with me.box():
        navbar()
        me.slot()

# Define the scaffold to use the layout
@me.component
def scaffold():
    with layout():
        main_page()

# Run the application
if __name__ == "__main__":
    me.run()

Explanation

Navbar Component:

The navbar() function defines a simple navigation bar with buttons to navigate between different pages.

Form Page:

The form_page() function collects user input for name and age, utilizing text_input and number_input components. It also displays the submitted information.

Data Page:

The data_page() function shows a table with sample data using the dataframe() component and a bar chart using Matplotlib. The plot is converted to a base64 string and displayed as an image.

Main Page:

The main_page() function serves as the homepage, welcoming users to the dashboard.

State Management:

The State class manages the application state, storing user input and sample data.

Layout and Scaffold:

The layout() and scaffold() functions define the structure and layout of the application, incorporating the navigation bar and main content area.

Running the App

To run the application, save the code to a file (e.g., dashboard.py) and execute it using:

misop dashboard.py

Why Misop?

Mesop offers several advantages that make it an attractive choice for developing web applications, particularly in the context of machine learning (ML) and artificial intelligence (AI) applications. Here are some key benefits:

1. Python-Centric Development

Mesop allows developers to build web applications using Python, eliminating the need to write HTML, CSS, or JavaScript. This is particularly beneficial for data scientists and ML engineers who are more familiar with Python and prefer not to delve into frontend technologies. This Python-centric approach simplifies the development process and reduces the learning curve (GitHub).

2. Declarative UI and State Management

Mesop’s declarative UI model enables developers to define the desired state of the UI, and the framework takes care of rendering the appropriate elements. This approach, combined with robust state management features, allows for clean and maintainable code, making it easier to manage complex applications (GitHub).

3. Integrated ML and AI Components

Mesop provides high-level components tailored for ML and AI applications, such as real-time object detection, chat interfaces, and more. These components make it easier to prototype and deploy AI-driven applications, offering built-in support for common AI tasks (GitHub).

4. Rich Component Library

The framework includes a versatile range of components, from low-level UI building blocks to high-level, specialized components. This rich component library allows developers to quickly assemble and customize their applications without needing extensive frontend expertise (GitHub).

5. Seamless Cloud Deployment

Mesop simplifies the process of deploying applications to cloud platforms like Google Cloud Run. This feature is particularly useful for quickly sharing prototypes or deploying production-ready applications, without needing to manage complex server infrastructure (GitHub).

6. Flexibility and Extensibility

Mesop supports the integration of JavaScript web components, allowing developers to leverage the vast ecosystem of JavaScript libraries. This flexibility enables the development of custom components and the use of third-party tools, providing a powerful way to extend the framework’s capabilities (GitHub).

7. User-Friendly Development Experience

Features like hot reload and strong IDE support enhance the developer experience, making it easier to iterate and refine applications. The ability to see changes in real-time without restarting the application speeds up development and testing (GitHub).

8. Focus on Data and ML Applications

While Mesop can be used for general-purpose web development, its strengths lie in building data-centric applications. The framework’s design and components are optimized for use cases involving data visualization, user input, and interactive analytics (GitHub) (GitHub).

These advantages make Mesop a compelling choice for developers looking to build web applications with a focus on data science, ML, and AI, while also providing the flexibility to create more general-purpose applications.