> For the complete documentation index, see [llms.txt](https://black-horizon-studios.gitbook.io/emerald-ai-wiki/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://black-horizon-studios.gitbook.io/emerald-ai-wiki/emerald-components-optional/ui-component.md).

# UI Component

<figure><img src="/files/SQnWuJ6fkPBuvFi9epqD" 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="/files/xZaGLH4nMJaxtOX7T6uo">/files/xZaGLH4nMJaxtOX7T6uo</a></td><td><a href="/pages/DL7H7zWXBeKEOm0BuHaY">/pages/DL7H7zWXBeKEOm0BuHaY</a></td></tr><tr><td></td><td><p>           Setting up the </p><p>           UI Component</p></td><td></td><td><a href="/files/3HvsZCe86G6ZIZdTwDCV">/files/3HvsZCe86G6ZIZdTwDCV</a></td><td><a href="/pages/anXAG5FYbed6qpNGXi2I">/pages/anXAG5FYbed6qpNGXi2I</a></td></tr></tbody></table>