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.

The Generate function is selected by default for the AI Action step.

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

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.

Extract and Classify operations provide a JavaScript object as a result of their execution, while other actions stream the text output.

1. (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.

2. Click Execute action and check the Result tab.

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. 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.

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.

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.

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

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.