Google Mesop: Build A Web App UI in Less Than 10 Lines of Code

Imagine building a web app UI in fewer than 10 lines of code.

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

That’s a bold claim that the engineers at Google are making with the new, but unofficial, release Mesop — a Python-based UI framework that allows you to rapidly build web apps like demos and internal apps.

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 is perhaps the most in-demand UI for devs creating AI chatbots.

“I just need a simple UI with a prompt field, a submit button, and a nice-looking stream of messages between the user and the AI”

Well, all you need is a few lines of codes below:

import random
import time

import 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.",
]

After the code is compiled, here’s what the final result looks like:

Don’t mind the prompt and the response, it’s only for demo purposes.

This is incredibly useful knowing that such a user interface would usually take me more than 100 lines of code with either C# or Javascript.

Example #2: Text-to-image Web App

Another example is an image generator app interface that’s even shorter than the chatbot UI.

import mesop as me
import mesop.labs as mel

@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/text_to_image",
  title="Text to Image Example",
)
def app():
  mel.text_to_image(
    generate_image,
    title="Text to Image Example",
  )

def generate_image(prompt: str):
  return "https://www.google.com/logos/doodles/2024/earth-day-2024-6753651837110453-2xa.gif"

Here’s what the web app user interface looks like:

Awesome! Now all you need is to integrate an image model or API access into the backend.

Example #3: Text-to-text Web App

You can also build a simple text-to-text user interface with the following codes:

import mesop as me
import mesop.labs as mel

@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/text_to_text",
  title="Text to Text Example",
)
def app():
  mel.text_to_text(
    upper_case_stream,
    title="Text to Text Example",
  )

def upper_case_stream(s: str):
  return "Echo: " + s

Try Mesop Yourself

There are two ways to try Mesop. You can either test it on Google Colab or install and run it on your local PC.

First, let me show you how to try it on Google Colab.

Head over to this Colab Notebook and sign in with your Google account. Don’t worry, it’s free to use but with limitations.

Install Mesop by clicking on the little play button.

Make sure you see that green check mark that indicates Mesop was successfully installed. Next, import the libraries and start the application.

The little chat application example is just a few lines of code but was able to show us a complete and working user interface.

@me.page(path="/chat")
def chat():
  mel.chat(transform)

def transform(prompt: str, history: list[mel.ChatMessage]) -> str:
  return "Hello " + prompt

Note: You can also install Mesop locally and build apps offline by following this tutorial. If you want me to write a more comprehensive guide on building front-end UI with Mesop, please let me know in the comments.

If you want to deep dive into the details of the codes, check out the open-source repo on GitHub.

Is Mesop an Official Google Product?

No, Mesop is not an official Google product and Mesop is a 20% project maintained by a small core team of Google engineers with contributions from the broader community.

Final Thoughts

If you’re new to Python like me, you might still find Mesop a bit challenging. It’s probably best for people who already know Python pretty well and want to start making web apps.

Since Mesop is open-source, its success will depend on whether lots of people start using it and helping to improve it. If that happens, it could become a really popular tool for Python developers who want to create web apps — same with StreamLit, Gradio, or ChainLit.

If you’re looking to quickly test out ideas, make tools for your team, or create demos, Mesop could be a great choice. So check it out and let me know what you think about this new tool.

‍