How to Create a Stunning Web UI for CrewAI with Taipy

A Quick Tutorial for UI development of the CrewAI app

Image by author

In our last tutorial, we learned how to create a web app with the latest version, 0.80, of the CrewAI framework. In that development, we used the Panel as the web UI library to create an interactive multi-agent workflow app. We implemented redirecting agents’ output and user input messages from the command line to the front end. Panel is a powerful library for building web apps and is highly compatible with CrewAI. However, it is not the only option. This tutorial will show you how to create a web UI with Taipy, another popular open-source library for building data apps.

Taipy

Like Panel, Taipy is another powerful Python library covering both backend and frontend, and it initially focuses on data-driven app development. In addition to the various types of visual elements that Taipy provides to support data visualization and interaction with minimal coding effort, Taipy also introduces some new concepts to further streamline the development process. For example, Taipy allows users to create a web page by using a Markdown string, which can include all the necessary elements, configurations, and methods.

For example, a page can be structured as follows:

page = """
<|{conversation}|chat|users={users}|on_action=send_message|sender_id=Human|show_sender=True|mode=markdown|>
"""

This code snippet defines a Taipy page with a chat component. The conversation variable holds the chat history, and the users variable contains the list of users participating in the chat. The on_action parameter is set to the send_message function which handles the sending of messages. The sender_id is set to “Human”, indicating that the messages are sent by a human user. The show_sender parameter is set to True to display the sender’s name, the mode is set to markdown to enable Markdown formatting in the chat messages. It’s obvious that such type of definition is much more concise and friendly to the developers who are not familiar with Python and HTML.

Another great feature of Taipy is its “State” concept. The state variable stores the context for a particular access of a web user, so it’s very convenient for the developers to manage the session-based data across the entire app. For our UI implementation of the CrewAI app, we will need to pass the output/input messages back and forth between agents and the chat UI, so using the state to carry them is a very effective way. We will see the details later in the code walkthrough.

Implementation

Now, let’s start the implementation. The final application will have the same experience as the one we built with Panel:

1. Build the default CrewAI agents and workflows by CrewAI Crew creation command

2. Use the web UI to wrap the app and display the agents’ output and the chat history

3. Enable the human user to interact with agents by processing the input messages at the beginning or the middle of the workflow.

First, we need to install Taipy and the other dependencies.

pip install taipy crewai

CrewAI Project Creation

Now, let’s create the default CrewAI agents and workflows. As we have introduced in the latest video, the CrewAI framework in current 0.80 version has introducd an automated command tool to create a full-scaled multi-agents application by a single command. After the creation, the component are well structured that you can either directly run it or customize it conveniently in dedicated sections.

Then, create a new CrewAI project using its CLI:

crewai create crew crewai_taipy

During creation, you will be asked to choose the language model and your API key for agents. After a couple of seconds, you will see a message showing that your crew has been created successfully, and there will be a new directory called crewai_taipy under your current working directory with the basic structure of your project.

In the structure, you will find that the main.py and crew.py are located in the src/ directory, and two YAML files are located in the src/config/ directory. The basic multi-agent logic is still implemented in the two Python files, but the system instructions for agents and tasks are now moved to the YAML files.

Having the crews and workflow ready, we can start to build the Taipy web UI.

crew.py implementation

Let’s find the crew.py file in the src folder, and we will first add the output redirecting method to the agents.

Add the following code to the crew.py file:

from typing import Callable, Optional
from crewai.tasks.task_output import TaskOutput

output_handler: Optional[Callable] = None

def register_output_handler(handler: Callable):
    """Register the output handler from crewai_taipy"""
    global output_handler
    output_handler = handler

def print_output(output: TaskOutput):
    """Bridge function to call Taipy's output handler"""
    if output_handler:
        output_handler(output)
    return output

In this part of the code, we are setting up a mechanism to handle the output from CrewAI agents and redirect it to Taipy’s UI. We start by importing the necessary types from the typing module, specifically Callable and Optional.

We then define a global variable called output_handler, which will store the callback function from crewai_taipy. The register_output_handler function allows us to register this callback function, and the print_output function acts as a bridge to call Taipy’s output handler. If the output_handler is set, it will be called with the output from the TaskOutput, effectively redirecting the output to Taipy’s UI.

Here, we will expose the register_output_handler function to the main module, which will be introduced later to define the correct Taipy display function for the output.

Then, we will modify the research_task and reporting_task methods to register the print_output callback function.

@task
def research_task(self) -> Task:
    return Task(
       config=self.tasks_config['research_task'],
       callback=print_output,
    )
    
@task
def reporting_task(self) -> Task:
    return Task(
       config=self.tasks_config['reporting_task'],
       output_file='report.md',
       callback=print_output,
       human_input=True,
    )

And don’t forget to set human_input to True for the reporting_task method to enable the human user to input further instructions for the agent.

After the modification of crew.py, we will move to the main.py file to define the entire integration of workflows with Taipy UI. Let’s first remove all the existing content in the main.py file under the /src folder.

main.py implementation