Mesop#

MesopUI in FastAgency offers a web-based interface for interacting with multi-agent workflows. Unlike the ConsoleUI, which is text-based and runs in the command line, MesopUI provides a user-friendly browser interface, making it ideal for applications that need a more engaging and rich user experience.

When creating a Mesop application, you can choose between the following modes:

No Authentication: Open access to all users.
Basic Authentication: Simple username and password authentication for rapid prototyping. Not recommended for production.
Firebase Authentication: A more robust authentication mechanism that uses Firebase as the provider for authenticating users.

Note

Currently, Firebase authentication supports only Google as sign-in method. Future releases will introduce more sign-in options within Firebase.

Below, we’ll walk through the steps to set up a basic student-teacher conversation with MesopUI, highlighting the process for adding authentication.

Prerequisites#

No AuthenticationBasic AuthenticationFirebase Authentication

No prerequisites are required for this mode

To enable Firebase authentication, follow these steps to set up your Firebase project and configure access:

Create a Firebase Account:#

Sign up for a Firebase account and create a new project on the Firebase Console. If you’re unfamiliar with the process, refer to this guide on setting up a new Firebase account and project.
Configure Firebase Project:#

To integrate Firebase with your Mesop application, you’ll need the Firebase configuration and service account credentials. Follow these steps to retrieve them:
- Firebase Configuration: Retrieve the configuration keys for your web application. Follow this guide if you need help locating the configuration details.
- Service Account Credentials: Download the service account JSON file. Keep this file secure—do not commit it to Git or expose it in public repositories. Refer to this guide for detailed instructions.
  
  Danger
  
  The service account JSON file must be kept secure and should never be committed to Git for security purposes. See Best practices for managing service account keys.
Enable Google as a Sign-In Method:#
- In this example, we’re using Google as the sign-in method. Enable it in the Firebase Console by following these steps:
  - Open the Firebase Console and select your project.
  - Go to Authentication > Sign in method.
  - Click Add new provider, select Google, and enable it.
  - Click Save
Set Up Environment Variable:#

To securely integrate Firebase, you only need to set one environment variable, which points to the path of your Firebase service account credentials JSON file. This variable is essential for your FastAgency application to function correctly.

Firebase Service Account Key Env Variable:#

Set the path to your downloaded service account JSON file by running the following command in the terminal where you’ll launch the FastAgency application:
Linux/macOSWindows
export GOOGLE_APPLICATION_CREDENTIALS=/path/to/your/serviceAccountKey.json
set GOOGLE_APPLICATION_CREDENTIALS=/path/to/your/serviceAccountKey.json
Danger

The service account JSON file must be kept secure and should never be committed to Git for security purposes. See Best practices for managing service account keys.

With these configurations, you’re ready to add Firebase authentication to your Mesop application!

Installation#

We strongly recommend using Cookiecutter for setting up the project. Cookiecutter creates the project folder structure, default workflow, automatically installs all the necessary requirements, and creates a devcontainer that can be used with Visual Studio Code.

You can setup the project using Cookiecutter by following the project setup guide.

Alternatively, you can use pip + venv. To install FastAgency with MesopUI support, use the following command:

No AuthenticationBasic AuthenticationFirebase Authentication

pip install "fastagency[autogen,mesop]"

pip install "fastagency[autogen,mesop,basic_auth]"

pip install "fastagency[autogen,mesop,firebase]"

This command ensures that the required dependencies for both AutoGen and Mesop are installed.

Usage#

You can simply create Mesop based UI by importing and instantiating the MesopUI class with no parameters:

from fastagency.ui.mesop import MesopUI

ui = MesopUI()

However, you might want to add some customisation to the look-and-feel of the user interface or change some security settings as follows:

Security#

You can pass a custom SecurityPolicy object and specify things such as:

a list of allowed iframe parents,
a list of sites you can connect to,
a list of sites you load scripts from, and
a flag to disable trusted types.

import mesop as me

from fastagency.ui.mesop import MesopUI

security_policy=me.SecurityPolicy(allowed_iframe_parents=["https://acme.com"], allowed_script_srcs=["https://cdn.jsdelivr.net"])

ui = MesopUI(security_policy=security_policy)

No AuthenticationBasic AuthenticationFirebase Authentication

Info

To support Firebase's JavaScript libraries, FastAgency internally adjusts its security policy to allow required resources. Here are the specific adjustments made:

Loosening Trusted Types: dangerously_disable_trusted_types=True is enabled. This setting relaxes certain restrictions on JavaScript code execution, allowing Firebase's libraries to function properly.
Allowing Connections to Firebase Resources: The allowed_connect_srcs setting is updated to include *.googleapis.com, which permits API calls to Firebase and related Google services.
Permitting Firebase Script Sources: The allowed_script_srcs setting is modified to allow scripts from *.google.com, https://www.gstatic.com, https://cdn.jsdelivr.net

These adjustments ensure that Firebase scripts and services can load without conflicts.

For more details on configuring security, see the official Mesop documentation.

Modifying styles#

All Styles used in styling of Mesop components can be passed to the MesopUIconstructor and change the default behavior. They are specified in top-level styling class MesopHomePageStyles.

import mesop as me

from fastagency.ui.mesop import MesopUI

styles=MesopHomePageStyles(
    stylesheets=[
        "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
    ],
    root=me.Style(
        background="#e7f2ff",
        height="100%",
        font_family="Inter",
        display="flex",
        flex_direction="row",
    ),
    message=MesopMessagesStyles(
        single_choice_inner=MesopSingleChoiceInnerStyles(
            disabled_button=me.Style(
                margin=me.Margin.symmetric(horizontal=8),
                padding=me.Padding.all(16),
                border_radius=8,
                background="#64b5f6",
                color="#fff",
                font_size=16,
            ),
        )
    ),
)


ui = MesopUI(styles=styles)

Example: Student and Teacher Learning Chat#

This example shows how to create a simple learning chat where a student agent interacts with a teacher agent. The student asks questions, and the teacher provides responses, simulating a learning environment. The conversation is facilitated through the web interface using MesopUI.

Step-by-Step Breakdown#

1. Import Required Modules#

We begin by importing the necessary modules from FastAgency and AutoGen. These imports provide the essential building blocks for creating agents, workflows, and integrating MesopUI.

No AuthenticationBasic AuthenticationFirebase Authentication

import os
from typing import Any

import mesop as me
from autogen.agentchat import ConversableAgent

from fastagency import UI, FastAgency
from fastagency.runtimes.autogen import AutoGenWorkflows
from fastagency.ui.mesop import MesopUI
from fastagency.ui.mesop.styles import (
    MesopHomePageStyles,
    MesopMessagesStyles,
    MesopSingleChoiceInnerStyles,
)

import os
from typing import Any

import mesop as me
from autogen.agentchat import ConversableAgent

from fastagency import UI, FastAgency
from fastagency.runtimes.autogen import AutoGenWorkflows
from fastagency.ui.mesop import MesopUI
from fastagency.ui.mesop.auth.basic_auth import BasicAuth
from fastagency.ui.mesop.styles import (
    MesopHomePageStyles,
    MesopMessagesStyles,
    MesopSingleChoiceInnerStyles,
)

BasicAuth: This class enables you to integrate basic username/password authentication into your Mesop application.

import os
from typing import Any

import mesop as me
from autogen.agentchat import ConversableAgent

from fastagency import UI, FastAgency
from fastagency.runtimes.autogen import AutoGenWorkflows
from fastagency.ui.mesop import MesopUI
from fastagency.ui.mesop.auth.firebase import FirebaseAuth, FirebaseConfig
from fastagency.ui.mesop.styles import (
    MesopHomePageStyles,
    MesopMessagesStyles,
    MesopSingleChoiceInnerStyles,
)

FirebaseAuth and FirebaseConfig: These classes enable you to integrate Firebase authentication into your Mesop application.

ConversableAgent: This class allows the creation of agents that can engage in conversational tasks.
FastAgency: The core class responsible for orchestrating workflows and connecting them with UIs.
UI and MesopUI: These classes define the user interface for interaction, with MesopUI enabling a web-based interaction.
AutoGenWorkflows: Manages the creation and execution of multi-agent workflows.

2. Configure the Language Model (LLM)#

Next, we configure the language model that powers the agents. In this case, we're using GPT-4o, and the API key is retrieved from the environment.

llm_config = {
    "config_list": [
        {
            "model": "gpt-4o-mini",
            "api_key": os.getenv("OPENAI_API_KEY"),
        }
    ],
    "temperature": 0.8,
}

Explanation: The configuration specifies the LLM model and API key used for powering the conversation between agents. The temperature is set to 0.0 to ensure deterministic responses from the agents, making interactions consistent and reliable.

3. Define the Workflow and Agents#

Here, we define a simple workflow where the Student Agent interacts with the Teacher Agent. The student asks questions, and the teacher responds as a math teacher. The workflow is registered using AutoGenWorkflows.

wf = AutoGenWorkflows()


@wf.register(name="simple_learning", description="Student and teacher learning chat")
def simple_workflow(
    ui: UI, params: dict[str, Any]
) -> str:
    initial_message = ui.text_input(
        sender="Workflow",
        recipient="User",
        prompt="What do you want to learn today?",
    )

    student_agent = ConversableAgent(
        name="Student_Agent",
        system_message="You are a student willing to learn.",
        llm_config=llm_config,
    )
    teacher_agent = ConversableAgent(
        name="Teacher_Agent",
        system_message="You are a math teacher.",
        llm_config=llm_config,
    )

    chat_result = student_agent.initiate_chat(
        teacher_agent,
        message=initial_message,
        summary_method="reflection_with_llm",
        max_turns=5,
    )

    return chat_result.summary  # type: ignore[no-any-return]

Agent Overview: The Student Agent is configured with a system message, "You are a student willing to learn," and will initiate questions during the interaction. The Teacher Agent, on the other hand, is set up as a math teacher and will respond to the student's questions.
Workflow Registration: The workflow is registered under the name simple_learning. The ConversableAgent class is used to represent both the student and teacher agents, allowing them to communicate with each other up to 5 turns before summarizing the conversation using the reflection_with_llm method.

4. Using MesopUI#

Finally, we instantiate MesopUI to link the workflow to a web-based interface. This allows the user to interact with the agents through a web browser.

No AuthenticationBasic AuthenticationFirebase Authentication

security_policy=me.SecurityPolicy(allowed_iframe_parents=["https://acme.com"], allowed_script_srcs=["https://cdn.jsdelivr.net"])

styles=MesopHomePageStyles(
    stylesheets=[
        "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
    ],
    root=me.Style(
        background="#e7f2ff",
        height="100%",
        font_family="Inter",
        display="flex",
        flex_direction="row",
    ),
    message=MesopMessagesStyles(
        single_choice_inner=MesopSingleChoiceInnerStyles(
            disabled_button=me.Style(
                margin=me.Margin.symmetric(horizontal=8),
                padding=me.Padding.all(16),
                border_radius=8,
                background="#64b5f6",
                color="#fff",
                font_size=16,
            ),
        )
    ),
)

ui = MesopUI(security_policy=security_policy, styles=styles)

app = FastAgency(provider=wf, ui=MesopUI(), title="Learning Chat")

Explanation: Here, we set up the MesopUI as the user interface for the workflow, which will allow the entire agent interaction to take place through a web-based platform.

security_policy=me.SecurityPolicy(allowed_iframe_parents=["https://acme.com"], allowed_script_srcs=["https://cdn.jsdelivr.net"])

styles=MesopHomePageStyles(
    stylesheets=[
        "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
    ],
    root=me.Style(
        background="#e7f2ff",
        height="100%",
        font_family="Inter",
        display="flex",
        flex_direction="row",
    ),
    message=MesopMessagesStyles(
        single_choice_inner=MesopSingleChoiceInnerStyles(
            disabled_button=me.Style(
                margin=me.Margin.symmetric(horizontal=8),
                padding=me.Padding.all(16),
                border_radius=8,
                background="#64b5f6",
                color="#fff",
                font_size=16,
            ),
        )
    ),
)

# Initialize auth with username and password
auth = BasicAuth(
    # TODO: Replace `allowed_users` with the desired usernames and their
    # bcrypt-hashed passwords. One way to generate bcrypt-hashed passwords
    # is by using online tools such as https://bcrypt.online
    allowed_users={
        "harish": "$2y$10$4aH/.C.WritjZAYskA0Dq.htlFDJTa49UuxSVUlp9JCa2K3PgUkaG",  # nosemgrep
        "davor@airt.ai": "$2y$10$Yz9GuF/bWmRFmnXFkauOwePT/U.VSUHdpMOX7GPB8GiklJE4HJZmG"  # nosemgrep
    }
)

ui = MesopUI(security_policy=security_policy, styles=styles, auth=auth)

app = FastAgency(provider=wf, ui=ui, title="Learning Chat")

The BasicAuth class allows you to define a set of allowed users with bcrypt-hashed passwords, providing secure access to your Mesop application. Only users listed in the allowed_users dictionary can successfully authenticate.

Note

Only the bcrypt algorithm is supported for password hashing. Other algorithms, like MD5 or SHA-256, won’t work with this BasicAuth class. Ensure all passwords are hashed using bcrypt.

BasicAuth Configuration:

User Setup:
- The allowed_users parameter accepts a dictionary that maps usernames to their bcrypt-hashed passwords.
- Only bcrypt hashing is supported; other hashing algorithms (like MD5 or SHA-256) will not work with BasicAuth class.
Hashing Passwords with Bcrypt:
- For each user, generate a bcrypt hash of their password using tools like the Bcrypt Hash Generator.

Generating Bcrypt-Hashed Passwords

To quickly create a bcrypt hash for a password, follow these steps:

Open the Bcrypt Hash Generator.
In the Plain Text Input field, enter the password (e.g., someStrongPassword).
Set the Cost Factor to 10 (default).
Click GENERATE HASH.
Copy the hash, which will start with $2y$..., and use it as the password for the corresponding user.

For Example:

allowed_users = {
    "harish": "$2y$10$4aH/.C.WritjZAYskA0Dq.htlFDJTa49UuxSVUlp9JCa2K3PgUkaG"  # nosemgrep
}

In this example, the hash is generated from someStrongPassword for the user harish.

Authenticating in the Mesop Web App

To log in, users should enter their original passwords (e.g., someStrongPassword for harish) on the Mesop application’s login screen. The BasicAuth class then verifies the password by comparing its bcrypt hash with the stored hash in allowed_users. If the hashes match, the user is successfully authenticated.

security_policy=me.SecurityPolicy(allowed_iframe_parents=["https://acme.com"], allowed_script_srcs=["https://cdn.jsdelivr.net"])

styles=MesopHomePageStyles(
    stylesheets=[
        "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
    ],
    root=me.Style(
        background="#e7f2ff",
        height="100%",
        font_family="Inter",
        display="flex",
        flex_direction="row",
    ),
    message=MesopMessagesStyles(
        single_choice_inner=MesopSingleChoiceInnerStyles(
            disabled_button=me.Style(
                margin=me.Margin.symmetric(horizontal=8),
                padding=me.Padding.all(16),
                border_radius=8,
                background="#64b5f6",
                color="#fff",
                font_size=16,
            ),
        )
    ),
)

# TODO: replace this with your web app's Firebase configuration
firebase_config = FirebaseConfig(
    api_key="<your_firebase_api_key>",
    auth_domain="<your_firebase_auth_domain>",
    project_id="<your_firebase_project_id>",
    storage_bucket="<your_firebase_storage_bucket>",
    messaging_sender_id="<your_firebase_messaging_sender_id>",
    app_id="<your_firebase_app_id>"
)

# Initialize auth with Google sign-in
auth = FirebaseAuth(
    sign_in_methods=["google"],
    config=firebase_config,
    # TODO: Replace the emails in allowed_users with the desired ones
    allowed_users=["harish@airt.ai", "davor@airt.ai"]
)

ui = MesopUI(security_policy=security_policy, styles=styles, auth=auth)

Create Firebase Configuration:

Initialize the FirebaseConfig class by passing the necessary values from your Firebase configuration.
Initialize Firebase Authentication:

Instiantiate the FirebaseAuth with Google as the sign-in method and pass the Firebase configuration.

Note

Currently, Firebase is the only supported authentication provider, with Google as the available sign-in method. Future releases will introduce more sign-in options within Firebase.
- The allowed_users parameter controls access to the application, with the following options:
  - String (str):
    - To allow a single email address, set allowed_users="user@example.com". Only this user will have access.
    - To permit access for everyone, set allowed_users="all".
  - List of Strings (list[str]):
    - Provide a list of authorized email addresses, e.g., allowed_users=["user1@example.com", "user2@example.com"]. Only users with these email addresses will be allowed access.
  - Callable (Callable[[dict[str, Any]], bool]):
    - This option provides maximum flexibility, allowing you to define custom validation logic. You can pass a function that takes a dictionary and returns a boolean to indicate whether access is granted. This setup supports more complex access checks, such as database lookups, external API checks, and custom logic.
Configure the Mesop UI:

MesopUI is set up with a security_policy, custom styles, and the auth configuration. This step ensures that the user interface for the Mesop application is protected by the specified authentication method.

Complete Application Code#

No AuthenticationBasic AuthenticationFirebase Authentication

main.py

import os
from typing import Any

import mesop as me
from autogen.agentchat import ConversableAgent

from fastagency import UI, FastAgency
from fastagency.runtimes.autogen import AutoGenWorkflows
from fastagency.ui.mesop import MesopUI
from fastagency.ui.mesop.styles import (
    MesopHomePageStyles,
    MesopMessagesStyles,
    MesopSingleChoiceInnerStyles,
)

llm_config = {
    "config_list": [
        {
            "model": "gpt-4o-mini",
            "api_key": os.getenv("OPENAI_API_KEY"),
        }
    ],
    "temperature": 0.8,
}

wf = AutoGenWorkflows()


@wf.register(name="simple_learning", description="Student and teacher learning chat")
def simple_workflow(
    ui: UI, params: dict[str, Any]
) -> str:
    initial_message = ui.text_input(
        sender="Workflow",
        recipient="User",
        prompt="What do you want to learn today?",
    )

    student_agent = ConversableAgent(
        name="Student_Agent",
        system_message="You are a student willing to learn.",
        llm_config=llm_config,
    )
    teacher_agent = ConversableAgent(
        name="Teacher_Agent",
        system_message="You are a math teacher.",
        llm_config=llm_config,
    )

    chat_result = student_agent.initiate_chat(
        teacher_agent,
        message=initial_message,
        summary_method="reflection_with_llm",
        max_turns=5,
    )

    return chat_result.summary  # type: ignore[no-any-return]


security_policy=me.SecurityPolicy(allowed_iframe_parents=["https://acme.com"], allowed_script_srcs=["https://cdn.jsdelivr.net"])

styles=MesopHomePageStyles(
    stylesheets=[
        "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
    ],
    root=me.Style(
        background="#e7f2ff",
        height="100%",
        font_family="Inter",
        display="flex",
        flex_direction="row",
    ),
    message=MesopMessagesStyles(
        single_choice_inner=MesopSingleChoiceInnerStyles(
            disabled_button=me.Style(
                margin=me.Margin.symmetric(horizontal=8),
                padding=me.Padding.all(16),
                border_radius=8,
                background="#64b5f6",
                color="#fff",
                font_size=16,
            ),
        )
    ),
)

ui = MesopUI(security_policy=security_policy, styles=styles)

app = FastAgency(provider=wf, ui=MesopUI(), title="Learning Chat")

main.py

import os
from typing import Any

import mesop as me
from autogen.agentchat import ConversableAgent

from fastagency import UI, FastAgency
from fastagency.runtimes.autogen import AutoGenWorkflows
from fastagency.ui.mesop import MesopUI
from fastagency.ui.mesop.auth.basic_auth import BasicAuth
from fastagency.ui.mesop.styles import (
    MesopHomePageStyles,
    MesopMessagesStyles,
    MesopSingleChoiceInnerStyles,
)

llm_config = {
    "config_list": [
        {
            "model": "gpt-4o-mini",
            "api_key": os.getenv("OPENAI_API_KEY"),
        }
    ],
    "temperature": 0.8,
}

wf = AutoGenWorkflows()


@wf.register(name="simple_learning", description="Student and teacher learning chat")
def simple_workflow(
    ui: UI, params: dict[str, Any]
) -> str:
    initial_message = ui.text_input(
        sender="Workflow",
        recipient="User",
        prompt="What do you want to learn today?",
    )

    student_agent = ConversableAgent(
        name="Student_Agent",
        system_message="You are a student willing to learn.",
        llm_config=llm_config,
    )
    teacher_agent = ConversableAgent(
        name="Teacher_Agent",
        system_message="You are a math teacher.",
        llm_config=llm_config,
    )

    chat_result = student_agent.initiate_chat(
        teacher_agent,
        message=initial_message,
        summary_method="reflection_with_llm",
        max_turns=5,
    )

    return chat_result.summary  # type: ignore[no-any-return]


security_policy=me.SecurityPolicy(allowed_iframe_parents=["https://acme.com"], allowed_script_srcs=["https://cdn.jsdelivr.net"])

styles=MesopHomePageStyles(
    stylesheets=[
        "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
    ],
    root=me.Style(
        background="#e7f2ff",
        height="100%",
        font_family="Inter",
        display="flex",
        flex_direction="row",
    ),
    message=MesopMessagesStyles(
        single_choice_inner=MesopSingleChoiceInnerStyles(
            disabled_button=me.Style(
                margin=me.Margin.symmetric(horizontal=8),
                padding=me.Padding.all(16),
                border_radius=8,
                background="#64b5f6",
                color="#fff",
                font_size=16,
            ),
        )
    ),
)

# Initialize auth with username and password
auth = BasicAuth(
    # TODO: Replace `allowed_users` with the desired usernames and their
    # bcrypt-hashed passwords. One way to generate bcrypt-hashed passwords
    # is by using online tools such as https://bcrypt.online
    allowed_users={
        "harish": "$2y$10$4aH/.C.WritjZAYskA0Dq.htlFDJTa49UuxSVUlp9JCa2K3PgUkaG",  # nosemgrep
        "davor@airt.ai": "$2y$10$Yz9GuF/bWmRFmnXFkauOwePT/U.VSUHdpMOX7GPB8GiklJE4HJZmG"  # nosemgrep
    }
)

ui = MesopUI(security_policy=security_policy, styles=styles, auth=auth)

app = FastAgency(provider=wf, ui=ui, title="Learning Chat")

main.py

import os
from typing import Any

import mesop as me
from autogen.agentchat import ConversableAgent

from fastagency import UI, FastAgency
from fastagency.runtimes.autogen import AutoGenWorkflows
from fastagency.ui.mesop import MesopUI
from fastagency.ui.mesop.auth.firebase import FirebaseAuth, FirebaseConfig
from fastagency.ui.mesop.styles import (
    MesopHomePageStyles,
    MesopMessagesStyles,
    MesopSingleChoiceInnerStyles,
)

llm_config = {
    "config_list": [
        {
            "model": "gpt-4o-mini",
            "api_key": os.getenv("OPENAI_API_KEY"),
        }
    ],
    "temperature": 0.8,
}

wf = AutoGenWorkflows()


@wf.register(name="simple_learning", description="Student and teacher learning chat")
def simple_workflow(
    ui: UI, params: dict[str, Any]
) -> str:
    initial_message = ui.text_input(
        sender="Workflow",
        recipient="User",
        prompt="What do you want to learn today?",
    )

    student_agent = ConversableAgent(
        name="Student_Agent",
        system_message="You are a student willing to learn.",
        llm_config=llm_config,
    )
    teacher_agent = ConversableAgent(
        name="Teacher_Agent",
        system_message="You are a math teacher.",
        llm_config=llm_config,
    )

    chat_result = student_agent.initiate_chat(
        teacher_agent,
        message=initial_message,
        summary_method="reflection_with_llm",
        max_turns=5,
    )

    return chat_result.summary  # type: ignore[no-any-return]


security_policy=me.SecurityPolicy(allowed_iframe_parents=["https://acme.com"], allowed_script_srcs=["https://cdn.jsdelivr.net"])

styles=MesopHomePageStyles(
    stylesheets=[
        "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
    ],
    root=me.Style(
        background="#e7f2ff",
        height="100%",
        font_family="Inter",
        display="flex",
        flex_direction="row",
    ),
    message=MesopMessagesStyles(
        single_choice_inner=MesopSingleChoiceInnerStyles(
            disabled_button=me.Style(
                margin=me.Margin.symmetric(horizontal=8),
                padding=me.Padding.all(16),
                border_radius=8,
                background="#64b5f6",
                color="#fff",
                font_size=16,
            ),
        )
    ),
)

# TODO: replace this with your web app's Firebase configuration
firebase_config = FirebaseConfig(
    api_key="<your_firebase_api_key>",
    auth_domain="<your_firebase_auth_domain>",
    project_id="<your_firebase_project_id>",
    storage_bucket="<your_firebase_storage_bucket>",
    messaging_sender_id="<your_firebase_messaging_sender_id>",
    app_id="<your_firebase_app_id>"
)

# Initialize auth with Google sign-in
auth = FirebaseAuth(
    sign_in_methods=["google"],
    config=firebase_config,
    # TODO: Replace the emails in allowed_users with the desired ones
    allowed_users=["harish@airt.ai", "davor@airt.ai"]
)

ui = MesopUI(security_policy=security_policy, styles=styles, auth=auth)

app = FastAgency(provider=wf, ui=ui, title="Learning Chat")

Running the Application#

The preferred way to run the Mesop application is using a Python WSGI HTTP server like Gunicorn on Linux and Mac or Waitress on Windows.

Cookiecutterenv + pip

Terminal

gunicorn main:app

First, install the package using package manager such as pip and then run it:

Linux/MacOSWindows

Terminal

pip install gunicorn
gunicorn main:app

Terminal

pip install waitress
waitress-serve --listen=0.0.0.0:8000 main:app

Note

Ensure that your OpenAI API key is set in the environment, as the agents rely on it to interact using gpt-4o-mini. If the API key is not correctly configured, the application may fail to retrieve LLM-powered responses.

Output#

The outputs will vary based on the interface, here is the output of the last terminal starting UI:

[2024-10-15 16:57:44 +0530] [36365] [INFO] Starting gunicorn 23.0.0
[2024-10-15 16:57:44 +0530] [36365] [INFO] Listening at: http://127.0.0.1:8000 (36365)
[2024-10-15 16:57:44 +0530] [36365] [INFO] Using worker: sync
[2024-10-15 16:57:44 +0530] [36366] [INFO] Booting worker with pid: 36366

No AuthenticationBasic AuthenticationFirebase Authentication

Debugging Tips#

If you encounter issues running the application, ensure that:

The OpenAI API key is correctly set in your environment variables.
All necessary packages are installed, especially the fastagency[autogen,mesop] dependencies.
The MesopUI web interface is accessible from the browser, and no firewall is blocking the connection.

By using MesopUI, developers can create interactive, web-based multi-agent applications with ease. This interface is ideal for building user-friendly, browser-accessible systems, enabling users to interact with agents in a more engaging and visual environment. You can extend this workflow for more complex scenarios, such as tutoring systems, customer support, or real-time information retrieval.

Mesop#

Prerequisites#

Create a Firebase Account:#

Configure Firebase Project:#

Enable Google as a Sign-In Method:#

Set Up Environment Variable:#

Firebase Service Account Key Env Variable:#

Installation#

Usage#

Security#

Modifying styles#

Example: Student and Teacher Learning Chat#

Step-by-Step Breakdown#

1. Import Required Modules#

2. Configure the Language Model (LLM)#

3. Define the Workflow and Agents#

4. Using MesopUI#

Complete Application Code#

Running the Application#

Output#

Debugging Tips#