# Building Workflow

{% hint style="info" %}
Key Concepts In This Chapter:\
\- Module and its Configuration
{% endhint %}

### A Simple Chatbot Example

In Pro Config, a workflow is a cascade of multiple modules that can perform a series of tasks. In this chapter, we will build a simple chatbot that involves the cascade of two Modules.&#x20;

{% code lineNumbers="true" %}

```json
{
  "type": "automata",
  "id": "chat_demo",
  "initial": "chat_page_state",
  "states": {
    "chat_page_state": {
      "inputs": {
        "user_message": {
          "type": "IM",
          "user_input": true
        }
      },
      "tasks": [
        {
          "name": "generate_reply",
          "module_type": "AnyWidgetModule",
          "module_config": {
            "widget_id": "1744214024104448000", // GPT 3.5
            "system_prompt": "You are a teacher teaching Pro Config.",
            "user_prompt": "{{user_message}}",
            "output_name": "reply"
          }
        },
        {
          "name": "generate_voice",
          "module_type": "AnyWidgetModule",
          "module_config": {
            "widget_id": "1743159010695057408", // TTS widget (Samantha)
            "content": "{{reply}}",
            "output_name": "reply_voice"
          }
        }
      ],
      "render": {
        "text": "{{reply}}",
        "audio": "{{reply_voice}}"
      },
      "transitions": {
        "CHAT": "chat_page_state"
      }
    }
  }
}
```

{% endcode %}

In the above config, we have created a chatbot that generates a reply to the user's input. Please note that this is a very simple chatbot without any memory  (we will implement a chatbot with memory in [Variables and Expressions](/proconfig-tutorial/tutorial/expressions-and-variables.md)). Now let's delve into the details of the above example:

In the chatbot above, we define the variable `user_message` of type `IM` (Instant Messaging). This allows the bot to take input in the form of messages sent to the bot. In the example, we have set a transition on event `CHAT` to point to `chat_page_state`. So, whenever a user sends a message in the chat, the state is reloaded and the message is taken as in `IM` input.

This `user_message` is then passed into the tasks.

### Configuration of Each Module

{% hint style="warning" %}
The LLMModule and TTSModule have been merged into AnyWidgetModule and will be deprecated in future versions.
{% endhint %}

Tasks contain multiple modules that execute sequentially. For each module, we need to specify the `module_type` and `module_config`.  Rather, `name` is optional (for readability). In the example above, we adopt `AnyWidgetModule` which is a general interface to call any widget available in the [Widget Center](https://app.myshell.ai/robot-workshop) .

The `widget_id` in the `module_config` is to determine which widget to use. In the above example, we include an LLM Widget (GPT-3.5) to generate the reply and a TTS Widget (voice of Samantha) to read out the reply.

For demonstration purposes, we only used a simple system prompt `"You are a teacher teaching Pro Config."`  In real-world applications,  it is required to put some effort into prompt engineering and optimizing this system prompt for better performance. \
\
As for the TTS Widgets, you can choose any of your favorite voices from <https://app.myshell.ai/robot-workshop> and paste the widget ID into the config.&#x20;

Specifically, after clicking the "workshop" button on the left menu bar, you will see this widget center. On the very top selection bar, select "TTS".  Then pick your favorite voice model, use the "share" button to copy the widget URL link, and paste it into the config file.

<figure><img src="/files/pWsoeTw9U0jHk3nQE6vR" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Tk0JZrEWo6bmOgphdBJU" alt=""><figcaption></figcaption></figure>

### Adding More Modules & Widget Center

MyShell currently supports over a thousand widgets with diverse functionalities, including prompt widgets, voice widgets, image generation widgets, and many more, in which all you could find on our widget center.

The AnyWidget Module for Pro Config is designed to be versatile. For instance, constructing a video generation bot that combines ASR, TTS, LipSync, and AutoCaption widgets is within the realm of possibilities.

As introduced beforehand, after you get into MyShell's Widget center, there a numerous widgets where you could play with and insert that into your Pro Config. I will suggest to follow these steps before you implement it in Pro Config.

1. Try it, Hands-on

<figure><img src="/files/DIIBderLMPMRINFjvPxT" alt=""><figcaption></figcaption></figure>

2. Adjust the parameters

<figure><img src="/files/0PMzLace9ztWF2ICCgsm" alt=""><figcaption></figcaption></figure>

\
3\. Copy the widget Pro Config template (it's an independent automata that includes that widget as a task)

<figure><img src="/files/7oogE9r9tbixWyJnhrgf" alt=""><figcaption></figcaption></figure>

\
4\. Integrate this widget into your Pro Config by using the `AnyWidgetModule`. Find more information in [this doc](https://docs.myshell.ai/product-manual/create/pro-config-mode-beta/basic/modules/anywidget-module).

### Render and Transitions

After the execution of the tasks, two variables called `reply` and `reply_voice` are obtained and ready to be rendered in a message that would appear in the User Interface. We have also handled a special event called `CHAT` in the transitions, which means when a user sends a message, the automata will jump into  `chat_page_state` and execute that state. In the next section, we will describe how to handle and use different types of transitions.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://myshell-wiki.gitbook.io/proconfig-tutorial/tutorial/building-workflow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
