# 모든 위젯과의 통합

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. We suggest to follow these steps before you implement it in Pro Config.

### 1. 직접 시도하기

![](/files/eOB7pKwSvyz3zC1WPc8E)

### 2. 매개변수 조정

![](/files/qoQePEVZ8mMKzUKpfDvR)

### 3. 위젯 Pro Config 템플릿 복사 (독립적인 자동장치로, 해당 위젯을 작업으로 포함)

![](/files/9Vii83JgTDih2E7fNbvu)

```json
{
  "id": "prompt_widget_template",
  "initial": "home_state",
  "states": {
    "home_state": {
      "inputs": {
        "prompt_a": {
          "type": "text",
	  "description":"The prompt for your audio",
          "user_input": true
        }
      },
      "tasks": [
        {
          "name": "any_module_example_task",
          "module_type": "AnyWidgetModule",
          "module_config": {
            "widget_id": "1743838636299784192",            
            "prompt_a":"{{prompt_a}}", // this field will received value from user input
            "denoising":0.75, // How much to transform input spectrogram
            "prompt_b":"90's rap", // The second prompt to interpolate with the first, leave blank if no interpolation
            "alpha":0.5, // Interpolation alpha if using two prompts. A value of 0 uses prompt_a fully, a value of 1 uses prompt_b fully
            "num_inference_steps":50, // Number of steps to run the diffusion model
            "seed_image_id":"vibes", // Seed spectrogram to use
            "output_name": "result"
          }
        }
      ],
      "render": {
        "text": "{{JSON.stringify(result)}}", // this widget will output a map, you can first run it and know what its type is.
        "buttons": [
          {
            "content":"Generate Again",
            "description":"",
            "on_click":"generate"
          }
        ]
      },
      "transitions": {
        "generate": "home_state"
      }
    }
  }
}
```

### 4. Modify Pro Config according to the copied config

For example, the original Pro Config is the [chatbot example](/ko/create/pro-config-mode/tutorial/building-workflow.md#a-simple-chatbot-example) in the previous chapter. We may replace TtsModule with the music generation widget.

{% hint style="warning" %}
다음 JSON은 템플릿을 그대로 복사해 변경하지 않은 유효하지 않은 상태입니다.
{% endhint %}

```json
{
  "type": "automata",
  "id": "chat_demo",
  "initial": "chat_page_state",
  "inputs": {},
  "outputs": {},
  "transitions": {},
  "states": {
    "chat_page_state": {
      "inputs": {
        "user_message": {
          "type": "IM",
          "user_input": true
        }
      },
      "tasks": [
        {
          "name": "generate_reply",
          "module_type": "AnyWidgetModule",
          "module_config": {
            "widget_id": "1744214024104448000",
            "system_prompt": "You are a teacher teaching Pro Config.",
            "user_prompt": "{{user_message}}",
            "output_name": "reply"
          }
        },
        {
          "name": "any_module_example_task",
          "module_type": "AnyWidgetModule",
          "module_config": {
            "widget_id": "1743838636299784192",            
            "prompt_a":"{{prompt_a}}", // this field will received value from user input
            "denoising":0.75, // How much to transform input spectrogram
            "prompt_b":"90's rap", // The second prompt to interpolate with the first, leave blank if no interpolation
            "alpha":0.5, // Interpolation alpha if using two prompts. A value of 0 uses prompt_a fully, a value of 1 uses prompt_b fully
            "num_inference_steps":50, // Number of steps to run the diffusion model
            "seed_image_id":"vibes", // Seed spectrogram to use
            "output_name": "result"
          }
        }
      ],
      "render": {
        "text": "{{reply}}",
        "audio": "{{reply_voice}}"
      },
      "transitions": {
        "CHAT": "chat_page_state"
      }
    }
  }
}
```

Then the variables' names may be changed to fit the original config. `"prompt_a":"{{prompt_a}}"` needs to be changed to `"prompt_a":"{{reply}}"`. `render` also needs to be changed.

{% hint style="info" %}
위젯 사용을 위해 입력이나 출력을 추가해야 할 수도 있습니다. 위젯은 예상치 못한 매개변수를 요구할 수 있기 때문입니다.
{% endhint %}

```json
{
  "type": "automata",
  "id": "chat_demo",
  "initial": "chat_page_state",
  "inputs": {},
  "outputs": {},
  "transitions": {},
  "states": {
    "chat_page_state": {
      "inputs": {
        "user_message": {
          "type": "IM",
          "user_input": true
        }
      },
      "tasks": [
        {
          "name": "generate_reply",
          "module_type": "AnyWidgetModule",
          "module_config": {
            "widget_id": "1744214024104448000",
            "system_prompt": "You are a teacher teaching Pro Config.",
            "user_prompt": "{{user_message}}",
            "output_name": "reply"
          }
        },
        {
          "name": "any_module_example_task",
          "module_type": "AnyWidgetModule",
          "module_config": {
            "widget_id": "1743838636299784192",            
            "prompt_a":"{{reply}}", // this field will received value from user input
            "denoising":0.75, // How much to transform input spectrogram
            "prompt_b":"90's rap", // The second prompt to interpolate with the first, leave blank if no interpolation
            "alpha":0.5, // Interpolation alpha if using two prompts. A value of 0 uses prompt_a fully, a value of 1 uses prompt_b fully
            "num_inference_steps":50, // Number of steps to run the diffusion model
            "seed_image_id":"vibes", // Seed spectrogram to use
            "output_name": "result"
          }
        }
      ],
      "render": {
        "text": "{{JSON.stringify(result)}}", // this widget will output a map, you can first run it and know what its type is.
      },
      "transitions": {
        "CHAT": "chat_page_state"
      }
    }
  }
}
```

Finally, adjust the `module_config` according to the parameters you have tried and decided in the step 2.


---

# 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://docs.myshell.ai/ko/create/pro-config-mode/tutorial/integration-with-any-widget.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.
