Google "Mesop": An Open-source and Python-based UI Framework

Build web apps UIs with less than 10 lines of codes.

Build a web app UI in less than 10 lines of code.

That’s the bold claim made by engineers at Google with their new, albeit unofficial, release of Mesop — a Python-based UI framework that enables rapid development of web applications, particularly demos and internal tools.

What is it? and how helpful is this new free tool for developers.

What is Mesop?

Mesop is in many ways a remix of many existing ideas packaged into a single cohesive UI framework, designed for Python developers. If you’re a developer who’s always struggled with making a decent-looking AI front-end interface fast, Mesop might be just what you need.

It’s still pretty new — they’re calling it version 0.8 — but it’s already looking promising. Here’s what makes Mesop cool:

1. You can build a basic web app super fast

2. It comes with ready-made pieces to build your app

3. It works well with Python code you already have

4. It handles a lot of the complicated stuff for you

5. You can make simple or complex apps with it

Mesop is well-suited for Machine Learning or AI app demos and internal tools because it enables developers without frontend experience to quickly build web apps.

One quick fact about Mesop, its first release was way back in December 2023.

---

Example #1: Chat Web App Demo

This interface is ideal for developers creating AI chatbots:

import random
import timeimport mesop as me
import mesop.labs as mel
@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/chat",
  title="Mesop Demo Chat",
)
def page():
  mel.chat(transform, title="Mesop Demo Chat", bot_user="Mesop Bot")
def transform(input: str, history: list[mel.ChatMessage]):
  for line in random.sample(LINES, random.randint(3, len(LINES) - 1)):
    time.sleep(0.3)
    yield line + " "
LINES = [
  "Mesop is a Python-based UI framework designed to simplify web UI development for engineers without frontend experience.",
  "It leverages the power of the Angular web framework and Angular Material components, allowing rapid construction of web demos and internal tools.",
  "With Mesop, developers can enjoy a fast build-edit-refresh loop thanks to its hot reload feature, making UI tweaks and component integration seamless.",
  "Deployment is straightforward, utilizing standard HTTP technologies.",
  "Mesop's component library aims for comprehensive Angular Material component coverage, enhancing UI flexibility and composability.",
  "It supports custom components for specific use cases, ensuring developers can extend its capabilities to fit their unique requirements.",
  "Mesop's roadmap includes expanding its component library and simplifying the onboarding processs.",
]

This simple yet effective setup drastically reduces the typical code required. After the code is compiled, here’s what the final result looks like: