# UI Component

<figure><img src="https://content.gitbook.com/content/v03IiZPaMe8fX49a9MnO/blobs/Y4f625UHoIgp4gWeV4DG/UIComponent.png" alt=""><figcaption></figcaption></figure>

## Using the UI Component

The UI Component allows AI to have automatically generated health bars, name text, and/or a level above them based on the information the user has set up with their AI.

{% hint style="success" %}
Here are the available tutorials and guides for the TPM Component.
{% endhint %}

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td></td><td>Applying the UI Component</td><td></td><td><a href="https://4021441153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv03IiZPaMe8fX49a9MnO%2Fuploads%2FE8h8ibjMHsDUqiyYbUzQ%2FAssignUIComponent(600).gif?alt=media&#x26;token=0477a420-398f-4db4-9df4-e0775da80c05">AssignUIComponent(600).gif</a></td><td><a href="ui-component/applying-the-ui-component">applying-the-ui-component</a></td></tr><tr><td></td><td><p>           Setting up the </p><p>           UI Component</p></td><td></td><td><a href="https://4021441153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv03IiZPaMe8fX49a9MnO%2Fuploads%2FrMqEUFlK8KDFOpr2yxSH%2FHealthBarSettings.png?alt=media&#x26;token=47b17455-e977-4413-9759-6637108af814">HealthBarSettings.png</a></td><td><a href="ui-component/setting-up-the-ui-component">setting-up-the-ui-component</a></td></tr></tbody></table>