Create a Multi-Agent App with Mesop, A New Chat UI Framework from Google

A Quick Tutorial of Using Mesop to Develop UI for AutoGen App

Image by author

Many developers, especially those focused on the LLM backend, lack the front-end skills required to build complex UIs. Existing Python libraries like Streamlit, Panel, and Chainlit have gained popularity, but now Google has joined the game by releasing Mesop, which offers another developer-friendly approach specifically designed for rapid prototyping and testing.

From its GitHub page, it looks like Mesop has just recently been converted from an experimental project to a public one, but even with that, it is still an engineers’ toy, which is out of Google’s official support. Look at this disclaimer:

However, this gives us more freedom to experiment and contribute to the project’s development. Being outside of official support means Mesop can evolve rapidly and incorporate community feedback more readily. This agility could lead to faster innovation and a more tailored experience for LLM app developers.

After many demonstrations on creating multi-agent apps with quick UI, I will introduce how to make a Mesop UI for an AutoGen app this time.

Let’s look at the Mesop’s key features:

• Ease of Use: Mesop simplifies UI creation with Python, requiring minimal front-end knowledge.

• Speed: Developers can quickly build and iterate on prototypes, accelerating the feedback loop.

• Component Library: Mesop offers a range of pre-built “components”, from basic buttons and text inputs to more advanced elements like chat interfaces and image tools. Check them out from the component page.

• Flexibility: While providing high-level components, Mesop also allows for customization and low-level control when needed, e.g., the style of each component can be defined following HTML Element inline style API, which will allow the app to be fully customized in styling.

• Open Source: Mesop’s open-source nature fosters community contribution and ensures flexibility for developers.

Let’s create a simple app as an example before the AutoGen app.

Text-to-Text Component

One of the biggest advantages of Mesop is its highly abstract component design, which significantly reduces the time and difficulty for the developers to create regular apps to test LLM. Here are the current three high-level components “Chat”, “Text to image” , and “Text to text”, and I believe they will release more in this category.

With these high-level components, you don’t have to worry about the layout, widgets, and styles so that the app code will be very simple. Let’s closely examine the implementation of the Text-to-Text app, which we will use to create our next AutoGen app.

This is the screenshot of this example app.

It creates a very simple web app that echoes users’ input text back to them, prepended with “Echo:. “. Here is its code, and you will be surprised by its simplicity.

import mesop as me
import mesop.labs as mel


@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io", "https://huggingface.co"]
  ),
  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

The decorator @me.page(…)transforms the app function into a Mesop page. It configures various properties of the page, including:

• security_policy: Defines a security policy that restricts the page from being embedded in iframes on any website except the URL in its list. This helps prevent potential security vulnerabilities like clickjacking.

• path: Sets the URL path for the page. For example, the local URL of this app will be http://localhost:32123/text_to_text

• title: Specifies the title that will appear in the browser tab.

Then in the main app() function:

• mel.text_to_text(…): This one-line creates the text_to_text component from Mesop.Labs that provides a simple text input and output area.

• upper_case_stream: This is the example handler function that is registered in the text_to_text component. Your custom processing logic from the “Input” box can be defined as such a handler, and its returned message will be displayed in the “Output” box. This example returns the original input message with the prepending Echo:.

AutoGen Integration

Understanding how to implement a basic Mesop app for LLM generation, let’s integrate AutoGen moving forward.

For this integration, we will fully leverage the text_to_text example with an extension to facilitate the multi-agent workflow.

Here is the screenshot of this demo app.

In this app, we will create a simple group chat with three agents, UserProxy, Researcher, and Writer, to work together to write blog posts for the users. In addition to the text_to_text demo, we added another section showing each agent's intermediate speech in the workflow section below the user section.

Without further ado, let’s see the code.