TaskFlowAI UI Developer Documentation

TaskFlowAI UI provides a set of user interface components built on top of the TaskFlowAI framework. It offers an easy way to create interactive chat-based and form-based interfaces for TaskFlowAI workflows. This documentation will guide you through the implementation and usage of the two main components: ChatUI and FormUI.

ChatUI

ChatUI is a user interface component that enables multi-message conversations with a single TaskFlowAI agent. It provides a chat-like experience where users can input messages and receive responses from the agent.

How ChatUI Works

Initialization: ChatUI is initialized with a title, a TaskFlowAI agent, and an optional additional instruction.
State Management: ChatUI uses Streamlit's session state to maintain conversation history across reruns.
Message Rendering: Messages are rendered in a chat-like interface, with user messages on one side and agent responses on the other.
Tool Call Visualization: When the agent uses tools, the tool calls are displayed in expandable sections, showing the tool name, parameters, and results.
Continuous Interaction: Users can input messages, and the agent responds in real-time, maintaining context throughout the conversation.

Implementing ChatUI

To implement ChatUI, follow these steps:

Import the necessary components:
Import the ChatUI class:

from taskflowai_ui import ChatUI

Create an agent:

travel_agent = Agent(
    role="travel agent",
    goal="assist the traveller with their request",
    attributes="friendly, hardworking, and comprehensive and extensive in reporting back to users",
    llm=OpenrouterModels.haiku,
    tools=[AmadeusTools.search_flights, WebTools.serper_search]
)

Create an instance of ChatUI, define any optional additional instructions for the agent:

create_chat_ui("Travel Assistant", travel_agent, additional_instruction="Be sure to make a few different searches for the user if requested.")

The create_chat_ui function takes the following parameters:

title (str): The title of the chat interface.
agent (Any): The TaskFlowAI agent to be used for generating responses.
additional_instruction (Optional[str]): An optional additional instruction to be provided to the agent.

FormUI

FormUI is a user interface component that allows you to create form-based workflows using TaskFlowAI. It provides a way to define a series of steps, each represented by a function, and automatically generates a form based on the input fields specified.

How FormUI Works

Workflow Definition: You define a series of steps as functions, where each function represents a task to be performed in the workflow.
Input Fields: You specify the input fields required for the workflow, which are used to generate the form dynamically.
Form Submission: When the user submits the form, FormUI executes each step of the workflow in sequence, passing the form data and the results of previous steps as arguments.
Result Display: The results of each step are displayed in the UI, along with any tool calls made during the execution.

Implementing FormUI

To implement FormUI, follow these steps:

Import the necessary components:

rom taskflowai import Agent, Task, WebTools, WikipediaTools, AmadeusTools, OpenaiModels, OpenrouterModels, set_verbosity
from taskflowai_ui import create_workflow_ui
# Set verbosity to 1 to see tool calls and prompt logs
set_verbosity(1)

Define your agents:

 
web_research_agent = Agent(
    role="web research agent",
    goal="search the web thoroughly for travel information",
    attributes="hardworking, diligent, thorough, comphrehensive.",
    llm=OpenrouterModels.haiku,
    tools=[WebTools.serper_search, WikipediaTools.search_articles, WikipediaTools.search_images]
)
 
travel_agent = Agent(
    role="travel agent",
    goal="assist the traveller with their request",
    attributes="frindly, hardworking, and comprehensive and extensive in reporting back to users",
    llm=OpenrouterModels.haiku,
    tools=[AmadeusTools.search_flights, WebTools.serper_search]
)

Define your workflow steps as functions:

def research_destination(destination, interests):
    destination_report = Task.create(
        agent=web_research_agent,
        context=f"User Destination: {destination}\nUser Interests: {interests}",
        instruction=f"Use your tools to search relevant information about the given destination: {destination}. Use wikipedia tools to search the destination's wikipedia page, as well as images of the destination. In your final answer you should write a comprehensive report about the destination with images embedded in markdown."
    )
    return destination_report
 
def research_events(destination, dates, interests):
    events_report = Task.create(
        agent=web_research_agent,
        context=f"User's intended destination: {destination}\n\nUser's intended dates of travel: {dates}\nUser Interests: {interests}",
        instruction="Use your tools to research events in the given location for the given date span. Ensure your report is a comprehensive report on events in the area for that time period."
    )
    return events_report
 
def search_flights(current_location, destination, dates):
    flight_report = Task.create(
        agent=travel_agent,
        context=f"Current Location: {current_location}\n\nDestination: {destination}\nDate Range: {dates}",
        instruction=f"Search for a lot of flights in the given date range to collect a bunch of options and return a report on the best options in your opinion, based on convenience and lowest price."
    )
    return flight_report
 
def write_travel_report(destination_report, events_report, weather_report, flight_report):
    travel_report = Task.create(
        agent=travel_agent,
        context=f"Destination Report: {destination_report}\n--------\n\nEvents Report: {events_report}\n--------\n\nWeather Report: {weather_report}\n--------\n\nFlight Report: {flight_report}",
        instruction=f"Write a comprehensive travel plan and report given the information above. Ensure your report conveys all the detail in the given information, from flight options, to weather, to events, and image urls, etc. Preserve detail and write your report in extensive length."
    )
    return travel_report

Define the workflow steps list:

workflow_steps = [
    research_destination,
    research_events,
    search_flights,
    write_travel_report
]

Define the input fields, where the first is the internal variable key and the second is the UI label:

input_fields = [
    {"current_location": "Enter current location"},
    {"destination": "Enter destination"},
    {"dates": "Enter dates"},
    {"interests": "Enter interests"}
]

Call the create_workflow_ui function:

create_workflow_ui("Travel Planning Assistant", workflow_steps, input_fields)

Run with

streamlit run your_script.py

The create_workflow_ui function takes the following parameters:

title (str): The title of the workflow.
workflow_steps (List[Callable]): A list of functions representing the steps in the workflow.
input_fields (List[Dict[str, str]]): A list of dictionaries specifying the input fields for the form.

TaskFlowAI UI provides powerful components for creating interactive chat-based and form-based interfaces for TaskFlowAI workflows. With ChatUI, you can easily build conversational interfaces that allow users to interact with TaskFlowAI agents. FormUI enables you to create structured workflows with step-by-step tasks and automatically generated forms based on input fields.

By leveraging these components, you can quickly build engaging and user-friendly interfaces for your TaskFlowAI applications. The modular design and flexible APIs make it easy to integrate TaskFlowAI UI into your existing projects.

FAQ Amadeus Tools