# AI Action

AI Actions enable the execution of various predefined tasks as well as custom prompts. The action streams the model's output which is ideal since you don't have to wait for the entire response to display it.

## Creating an AI Action

The flow of creating an AI Action is similar to basic actions you create and run in UI Bakery. Let's review the details:

1. Create a new action and select the **UI Bakery AI** data source - the AI action step will be selected automatically.
2. Next, select the specific function you need from the **Operation** dropdown:
   1. **Generate** - generates text based on the provided topic.
   2. **Summarize** - summarizes the provided text.
   3. **Classify** - classifies the provided text using specified classes.
   4. **Extract** - extracts the information from the provided text using specified classes.
   5. **Chat** - enables user/assistant communication.
   6. **Custom** - allows specifying a custom prompt to perform any other AI task.

{% hint style="info" %}
The *Generate* function is selected by default for the AI Action step.
{% endhint %}

You can click **Insert example** above the *Input* field to understand the capabilities of these functions.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FP1FSYcBu0P8CjHix8e9f%2FCleanShot%202025-04-29%20at%2016.28.31%402x-min.jpeg?alt=media&#x26;token=4bc4d1c4-58ef-45d8-b339-d28d17ff2e86" alt=""><figcaption></figcaption></figure>

For example, the **Extract** operation searches for specified classes, such as name, address, city, etc. in the provided text and outputs the entries from the text.

{% hint style="info" %}
**Extract** and **Classify** operations provide a JavaScript object as a result of their execution, while other actions stream the text output.
{% endhint %}

3. (Optional) Specify any *additional settings* if necessary:
   1. **System message** - instructs the model to behave in a specific way.
   2. **Temperature** - defines the randomness of the model. The higher the value, the more random the output will be.
4. Click **Execute action** and check the *Result* tab.

{% @arcade/embed flowId="ETMf7gJq1LRx2Y58lYFf" url="<https://app.arcade.software/share/ETMf7gJq1LRx2Y58lYFf>" %}

### Use case: Building an address extraction app

Let's review an example of creating an app with UI Bakery AI Actions - specifically a simple but powerful address extraction application.

The flow is as follows:

1. Start by adding the following components to the working area:
   1. **Text Area** - for users to insert their email or request.
   2. **JSON Viewer** - to display the extracted data.
   3. **Button** - to initiate the extraction process.
2. Next, create a new action and select the **UI Bakery AI** data source.
3. Select *extract* in the **Operation** dropdown and assign the value of the Text Area component as the user input, for example - `{{ui.textArea.value}}`.
4. Additionally, define the classes you want to find in the **Classes** field.\
   At this point, you can insert the user input and run the action to test it.
5. Now, to complete the setup, assign your action to the button's **On Click** trigger.
6. Finally, set the JSON Viewer's **Value** setting to the action's value variable - `{{actions.extractValues.data}}`.
7. &#x20;Type any text in the *User input* and click the **Extract address details** button to activate the action.

That's it! Now any time you'd want to extract the address details from the input, you'd simply need to click the button.

{% @arcade/embed flowId="pCd75pX9RtRHLTRVjxfF" url="<https://app.arcade.software/share/pCd75pX9RtRHLTRVjxfF>" %}

### Use case: Building a chat assistant app

UI Bakery has a pre-configured **Chat** component. Thus, to develop a chat assistant app, you simply need to add this component to the working area - the AI Action will be created automatically and assigned to the chat's *On Message Sent* trigger.

All necessary properties will be also automatically connected to the action's settings. The **Last user message** and **Messages history** properties reference the properties of the Chat component.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2Fcrcos2RVFR49Os2Cjj6Z%2FCleanShot%202025-04-30%20at%2015.51.33%402x-min.jpeg?alt=media&#x26;token=fd014e5d-419c-4933-809b-00b704a5fddf" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When an AI Action is executed **from the Chat component**, the response is automatically added to the chat history. There's no need to manually add the received message.
{% endhint %}

Now, if you type a message in the chat and send it, you'll get the response there.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FnZMVJALOzeUVbjKtIy1E%2FCleanShot%202025-04-30%20at%2015.56.53%402x-min.jpeg?alt=media&#x26;token=823db0e4-5b2b-4ef0-b7f4-7cbb99019ed8" alt=""><figcaption></figcaption></figure>

Additionally, you can also add Chat context through the **System message**. For example, you can use a Text Area component to provide context about UI Bakery.\
In real-world applications, this context may be retrieved from third-party resources, such as a database.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FE2B1fkkZLQPAdal7sOOt%2FCleanShot%202025-04-30%20at%2016.11.38%402x-min.jpeg?alt=media&#x26;token=ea1d2d93-a1b3-4cfc-825d-77a348504fed" alt=""><figcaption></figcaption></figure>