Skip to content

Home

Rapidly build AI apps in Python
Create web apps without the complexity of frontend development.
Used at Google for rapid AI app development.
Get started View showcase
Create your AI chat app in minutes
Python-native
Write your UI in idiomatic Python
With Mesop, you can leverage your existing Python expertise to build UIs effortlessly. No new languages to learn - just write clean, idiomatic Python using familiar constructs like functions, loops, and conditionals. 
@me.stateclass
class State:
  val: str

@me.page()
def page():
    state = me.state(State)
    me.text(state.val)

@me.stateclass
class State:
  is_loaded: bool

@me.page()
def page():
    if me.state(State).is_loaded:
      me.text("Loaded")
    else:
      me.progress_spinner()

from time import sleep

import mesop as me


def generate_str():
  yield "foo"
  sleep(1)
  yield "bar"


@me.stateclass
class State:
  string: str = ""


def button_click(action: me.ClickEvent):
  state = me.state(State)
  for val in generate_str():
    state.string += val
    yield


@me.page(path="/streaming")
def main():
  state = me.state(State)
  me.button("click", on_click=button_click)
  me.text(text=f"{state.string}")

@me.content_component
def scaffold(url: str):
  with me.box():
    menu(url=url)
    me.slot()

@me.component
def menu(url: str):
  ...

def page1():
  with scaffold(url="/page1"):
    some_content(...)
Modern UI principles
Declarative UI that's easy to understand
Mesop streamlines UI development with a declarative approach. Build expressive, maintainable interfaces using battle-tested patterns in Python. Say goodbye to complex imperative logic and hello to intuitive, clean code. 
@me.stateclass
class State:
    image_data: str
    detections: list[Detection]


@me.page()
def object_detector():
    state = me.state(State)

    me.text("Real-time Object Detection", type="headline-4")
    me.uploader(label="Upload an image", on_upload=on_image_upload)

    if state.image_data:
        me.image(src=f"data:image/jpeg;base64,{state.image_data}")

    if state.detections:
        me.text("Detected Objects:", type="headline-5")
        for detection in state.detections:
            detection_component(detection)

def detection_component(detection):
    me.text(f"{detection.obj}: {detection.confidence:.2f}")

def on_image_upload(e: me.UploadEvent):
    state = me.state(State)
    state.image_data = base64.b64encode(e.file.read()).decode()
    state.detections = detect_objects(e.file)
Building blocks
Jumpstart with ready-to-use components
Mesop provides a versatile range of 30 components, from low-level building blocks to high-level, AI-focused components. This flexibility lets you rapidly prototype ML apps or build custom UIs, all within a single framework that adapts to your project's use case. AI components
e.g. chat, text to image
 Form components
e,g. input, checkbox, radio
 Data display components
e,g. table, plot
Build anything
Build any user interface you can imagine
With Mesop, you can build virtually any web-based user interface or application you can imagine. From quick prototypes to enterprise tools, Mesop provides the customizability to bring your ideas to life.
Extensible
Seamlessly integrate JS with web components
Get the best of both worlds with Mesop web components. Leverage Python's simplicity for core logic, while accessing the vast ecosystem of JS libraries 
from typing import Any, Callable

import mesop.labs as mel


@mel.web_component(path="./counter_component.js")
def counter_component(
  *,
  value: int,
  on_decrement: Callable[[mel.WebEvent], Any],
  key: str | None = None,
):
  return mel.insert_web_component(
    name="quickstart-counter-component",
    key=key,
    events={
      "decrementEvent": on_decrement,
    },
    properties={
      "value": value,
    },
  )

import {
  LitElement,
  html,
} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';

class CounterComponent extends LitElement {
  static properties = {
    value: {type: Number},
    decrementEvent: {type: String},
  };

  constructor() {
    super();
    this.value = 0;
    this.decrementEvent = '';
  }

  render() {
    return html`
      <div class="container">
        <span>Value: ${this.value}</span>
        <button id="decrement-btn" @click="${this._onDecrement}">
          Decrement
        </button>
      </div>
    `;
  }

  _onDecrement() {
    this.dispatchEvent(
      new MesopEvent(this.decrementEvent, {
        value: this.value - 1,
      }),
    );
  }
}

customElements.define('quickstart-counter-component', CounterComponent);
Simple deployment
Deploy your app and share in minutes
Mesop streamlines cloud deployment, enabling you to share your AI application with the world in minutes. With step-by-step guides for deploying to Google Cloud Run or any cloud service that takes a container, you can go from local development to production-ready deployment without wrestling with complex server setups.
Google Cloud Run
Free for small apps
Developer experience
Delightful developer experience
Mesop streamlines app development with features like hot reload and strong IDE support with static types, eliminating friction and boosting productivity.
Instant hot reload
IDE support with static types
Community
See what others are saying
Join developers around the world who are building AI apps in Mesop.

Disclaimer

This is not an officially supported Google product.