June 9, 2023

Extract data from emails with AI

Jan Scholich

Product Manager

This step-by-step guide will walk you through the process of creating an app in Uify to extract structured data from an (unstructured) email. In our example, we will extract hotel booking information from customer emails sent to a hotel chain. The app will use OpenAI’s GPT model to extract booking information from an email, present the data to the user in a booking confirmation form, and then send it to a REST API endpoint to generate a booking in the hotel chain’s booking system. In total, you will need around 20 minutes to build this app.

Uify is a low-code platform designed for operations teams. You can build internal apps to automate your workflows and free your team from tedious repetitive work.

This step-by-step guide will walk you through the process of creating an app in Uify to extract structured data from an (unstructured) email.

In our example, we will extract hotel booking information from customer emails sent to a hotel chain. The app will use OpenAI’s GPT model to extract booking information from an email, present the data to the user in a booking confirmation form, and then send it to a REST API endpoint to generate a booking in the hotel chain’s booking system.

In total, you will need around 20 minutes to build this app.

In this how-to guide we will build an app within 20 minutes to extract data from hotel booking emails and send it to an internal API.

This is some text inside of a div block.

Requirements

Before you begin, you will need an OpenAI account and API key. For more information on how to get an OpenAI API key, visit this page.

Hold on - you don't even have access to Uify yet?! Then it's about time, just sign up for free here and get your own Uify workspace.

Step 0: Connect your Integrations

If you don’t have an OpenAI account connected to your Uify workspace yet, you need to do so by creating a new integration.
‍
Head to your ‘Data sources’ tab in the sidebar, click the ‘New source’ button at the bottom, give your data source a name, add your OpenAI API key and optionally your Organization ID, and hit ‘Create’.

Most likely, you will not have your own hotel booking system at hand. But no worries, we've got you covered! You can use a public REST API we created, which augments “your” booking system: https://custom-apis.uify.io/bookings

The API will simply send a success or error message when provided with an according request from your application.

To connect it, create a new REST data source, give it a name, paste the URL provided above into the 'Base URL' field, and hit 'Create'.

Step 1: Create an App

The first step is to create a new app. Navigate to the workspace and click the ‘New App’ button at the bottom of the sidebar.

Step 2: Create the Input UI

Create a user interface (UI) for inputting the email text you want to process. The UI will consist of a text field for the user to enter the booking email and a button to extract the booking data from that email.

1. Open the right panel to access the Component Library.

2. Drag a Text Area component onto the canvas and rename the label to "Booking email".
‍
3. Drag a Button onto the canvas, set its color, rename the label to "Extract data with LLM", and activate the ‘Show loading while running’ toggle in the Component Property Panel to observe if OpenAI has already responded.

Step 3: Create OpenAI action

The next step is to create a new OpenAI action to convert the email text to structured data.
‍
Open the Action Panel at the bottom of the editor:

Then hit “+” and select the ‘OpenAI prompt’ action:

To create the OpenAI action:

1. Select “Text to structured data” as the ‘Mode’ if not already set.

2. Select your desired ‘Model’. If you select GPT-4, make sure you have access. Otherwise chose another model.

3. Provide the 'input', i.e. the booking email. Reference the Text Area component you dropped on the canvas (if you didn't change it's name, it will be textarea1), add .value.

Wrap the code snippet in {{ }}.

4. Describe the input. In our case, it is "Hotel booking request".

5. Provide the information you want to receive from the OpenAI Large Language Model (LLM). Make sure to set the correct field types as per below.

6. Provide examples, i.e. input/output pairs. This is strongly encouraged as LLMs perform better with relevant examples.

Here are three examples to help you with that:

Example 1:
Input:
Hi there! I am looking to book a hotel in Nice for a weekend getaway with my partner. We would like to arrive on Friday, June 9th and depart on Sunday, June 11th. We will be traveling from out of town and would like a room with a nice view.

Output:
‍checkInDate: 2023-06-09
checkOutDate: 2023-06-11
numberOfGuests: 2
location: Nice
extras:

Example 2:
Input:
Hello, I am planning a trip to Rome and am looking for a hotel for one night. I will be traveling alone. Kindly proceed with the booking for May 20th if you have availability. I would also like to check out late the next day.

Output:
‍checkInDate: 2023-05-20
checkOutDate: 2023-05-21
numberOfGuests: 1
location: Rome
extras: late checkout

Example 3:
Input:
Greetings! I am interested in booking a hotel for a business trip to Barcelona. I will arrive on Wednesday, July 5th and stay for three nights. I will bring my dog as well, hope that’s alright. Would be great to enjoy breakfast on your roof terrace.

Output:
checkInDate: 2023-07-05
checkOutDate: 2023-07-08
numberOfGuests: 1
location: Barcelona
extras: breakfast, pet-friendly

7. Hit ‘Save’ to save your OpenAI action.

8. Select the “Generate booking” Button you placed on the canvas, go to the property panel on the right, and add select the OpenAI action in the ‘On click run’ dropdown in the ‘Events’ section:

9. Test the OpenAI action by typing a booking email text in the Text Area component and hitting ‘Run’ in the OpenAI action. If it returns an error, check the previous steps.

Step 4: Create the Output UI

The output UI consists of a Form with several input fields for the booking data:

1. Add a Form component to the canvas from the component library.

2. Drag two Date Input, one Number Input, and two Select components into the Form component. Change the component labels as per the screenshot below. The Select component “Extras” should be set to ‘Select type’: “Multiselect” in the Property Panel.

3. Add options for the “Location” and “Extras” Select components:

Location: ["Berlin", "Zurich", "Nice", "Barcelona", "Rome"]

Extras: ["breakfast", "parking", "early check-in", "late check-out", "pet-friendly"]

Step 5: Link Output to Input

Now link the output of the OpenAI action to the input components of the form. This will set the default value of each input component to the output of the OpenAI action.

To link the output to the respective fields, enter the following into the ‘Default value’ fields. For the “Check-in date”, this should look like this:

Proceed the same way for all input fields:

Check-in date: openAIPrompt1.data.checkInDate

Check-out date: openAIPrompt1.data.checkOutDate

Number of guests: openAIPrompt1.data.numberOfGuests

Location:[openAIPrompt1.data.location] (→ don’t forget the [] here!)

Extras: openAIPrompt1.data.extras

Step 6: Configure "Show cancel button"

Select the form and go to the Property Panel. Activate the ‘Show cancel button’ and rename the ‘Submit’ button to "Send to booking API" and the cancel button to "Discard".

Go to the ‘On cancel click’ dropdown in the ‘Form submit’ section and create a new JavaScript action:

Add this code to clear the form: form1.clear() and don’t forget to save the action!

Step 7: Add REST API Action

The next step is to add the REST API action to the ‘On submit run’ event of the form. This will send the form’s data to the REST API endpoint to generate a booking. We will also add a small JavaScript action to send a success or error notification to the user when sending an API request.

To add the REST API action:

1. Create a new REST API query in the Action Panel.

2. Select the “Booking confirmation API” under ‘Data source’.

3. Change the ‘Action type’ to “POST”.

4. Navigate to ‘Body’ in the panel below and add the following snippet:

Note: This snippet assumes that the referenced input fields’ names you created before have not been changed. If you relabelled them make sure to adjust the code accordingly before the .value part.

5. Now add a new JavaScript action in the Action Panel and rename it to handleAPISuccess.

6. Add the following code to the action and hit ‘Save’:

7. Now go back to the REST API action, navigate to the ‘Trigger’ tab, select the JS action you’ve just created under ‘On Success’, and hit ‘Save’.

Step 8: Deploy and Test App

The final step is to hit "Deploy" in the top right corner, select the ‘Version type’ and to release that beast!

Now navigate to your workspace by clicking the workspace logo in the top left corner and test your app.

Your booking app is on!

Congratulations - you have successfully created an app that extracts hotel booking information from user emails! No more sifting through long emails and manually copy/pasting data, let the AI handle that for you.

Not a Uify user yet? Sign up here, it’s free!

Need some help building an app or would like to brainstorm together which email workflows to automate with Uify? Book a free building session with one of our automation wizards here.

‍