UI Bakery AI

UI Bakery AI combines a pre-configured data source with a variety of AI models and actions for performing standard AI tasks such as text generation, data extraction, and more, right out of the box.

Data source configuration

The data source can be accessed through the Data sources page. By default, it's set up to use the Open AI key hosted by UI Bakery, ideal for testing and a quick start with the AI action.

Before moving to production, it's recommended to configure your own custom OpenAI key. Simply update the data source settings by pasting your key.

UI Bakery's hosted key comes with usage limitations. For production environments, it's advisable to use your own API key.

AI Actions

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

To create an AI Action, create a new action and select UI Bakery AI in the Type selector.

When starting, the generate function is automatically selected. Depending on your specific needs, please select the most suitable function:

• Custom: Allows specifying a custom prompt to perform any other AI task.

• Chat: Enables user/assistant communication.

• Extract: Extracts the information from the provided text using specified classes.

• Classify: Classifies the provided text using specified classes.

• Summarize: Summarizes the provided text.

• Generate: Generates text based on the provided topic.

To understand the capabilities of any action, click the Insert example button:

As you can see from the image above, 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 tasks provide a JavaScript object as a result of their execution, while other actions stream the text output.

You can also specify the following parameters:

• System messages - instructs the model of a specific behavior

• Temperature - defines the randomness of the model. The higher the value, the more random the output will be.

Address extraction app

As an example, let's build a simple but powerful address extraction application.

First, we will create an app interface. We will need a text area component for users to insert their email or request, a JSON viewer to display the extracted data, and a button to initiate the process:

Next, let's create an AI Action. Select the UI Bakery AI data source, choose the extract operation, and assign the value of the textArea component as a user input. Also, define the classes we want to find:

The app is almost ready. We can already insert the user input and run the action to test it:

To complete our setup, simply assign the action to the button's On Click trigger. Then, set the JSON viewer's Value setting to the action value variable {{actions.extractValues.data}}:

The app is complete! Simply paste any text and click the "Extract Address Details" button to activate the action.

Chat with AI assistant application

UI Bakery includes a pre-configured Chat component. To develop a chat assistant app, simply add the chat component to the page canvas - the AI action is automatically created and assigned to the chat's Send message trigger:

All necessary properties are automatically connected to the action settings. Last User Message and Messages History reference the chat component properties.

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

Next, let's type the message and press send - the response will be typed back:

Additionally, we can include chat context through the System message. In this example, we'll utilize a text area to provide the context about UI Bakery. In real-world applications, this context might be retrieved from third-party resources, such as a database: