Retool AI AppGen

The following lab demonstrates how to prompt a delivery application using Assist, Retool Database as a resource, and database schemas to generate the app.

Requirements

• Retool Cloud
• Retool Database
• Download the following CSV files:
  • int_delivery_summary.csv
  • int_orders.csv
  • int_warehouse.csv
  • int_provider.csv

Retool Self-hosted will be supported with a quarterly stable release in October.

Steps

Setup Retool Database

Before we prompt an application, we want to create a series of tables with sample data. This will provide assist with additional context as it constructs the app. The tables are:

1. int_delivery_summary - this represents a single view of the order_date , delivery_date , order , warehouse , and provider.
2. int_orders - this captures the orders including customer_name, customer_location, and product_sku.
3. int_warehouse - this captures the available warehouses, including warehouse_name, warehouse_location.
4. int_provider - this captures the available delivery providers, including provider_name, provider_truck_vin, and provider location.

The relationships are:

1. int_delivery_summary has many-to-one relationship with int_orders (can have multiple deliveries for the same order)
2. int_delivery_summary has one to one relationship with int_provider
3. int_delivery_summary has one to one relationship with int_warehouse

Import CSV(s) into new table(s)

With the prior information, we will create the schemas using CSV imports into a new table.

int_delivery_summary table

• Select Retool Home > Retool Database > + (Import CSV into new table) > select int_delivery_summary.csv.
• Make sure the table name is int_delivery_summary.
• Update the column types to match the arcade video below.

The following demonstrates the previous steps:

int_order table

• Select + > Import CSV into new table and the file int_order.csv.
• Make sure the table name is int_orders.
• Update the column types per the table below.

CSV Column	Database Column	Column Type
id	id	int4
customer_name	customer_name	text
customer_location	customer_location	text
product_sku	product_sku	text

int_warehouse table

• Select + > Import CSV into new table and the file int_warehouse.csv.
• Make sure the table name is int_warehouse.
• Update the column types per the table below.

CSV Column	Database Column	Column Type
id	id	int4
warehouse_name	warehouse_name	text
warehouse_location	warehouse_location	text

int_provider table

• Select + > Import CSV into new table and the file int_provider.csv.
• Make sure the table name is int_provider.
• Update the column types per the table below.

CSV Column	Database Column	Column Type
id	id	int4
provider_name	provider_name	text
provider_truck_vin	provider_vin	text
product_location	product_location	text

Update int_delivery_table to have foreign keys

Now with all the tables loaded, we need to associate the values in the int_delivery_summary to the int_orders, int_provider, and int_warehouse tables. Edit the int_delivery_summary table.

• Select the column (order_number) Settings > order_number.
• Change the Column type to Foreign key
• Change the Table to int_orders
• Change type to id (int4)
• Repeat this process to update the columns for logistics_provider, warehouse_location replacing table with (int_provider | int_warehouse).

The following demonstrates the previous steps:

Prompt a delivery application

Once the Retool Database is populated with the tables, we can now proceed to prompting an app using Assist.

• Go to Retool Home
• Select Create > App
• Update the name of the app from Untitled to new-delivery-app
• Select Assist icon (bottom left corner), select History and rename the thread to init app
• Specify the following prompt to generate a delivery application.

Create a delivery app for a customer support user where the order number, customer name, 
warehouse name, and provider name are displayed. Use @Retool Database int_delivery_summary 
table to get the necessary information. Create a search input field for filtering the table. 
Set the table search property to “fuzzy search” and its value equal to the search input field property. 
Keep all queries as simple as possible to make it more maintainable for the developer.

• Select Accept changes. Confirm in inspector (right panel) that the table includes a search property is set to Fuzzy logic.

The following video walks through the creation, understand, and debug prompts:

In some instances Retool Assist will not populate the table. This is due to the null values in the int_delivery_summary table. If this occurs, use prompts to have Assist fix the getDeliverySummary query. This is displayed in the previous video.

Style the app

Now let's change the styling of the app to consider accessibility requirements. While this not a fully compatible application it demonstrates how an LLM can be used to help guide the app styling.

• Provide the following prompt to update the styling:

Please make this app support improved accessibility following WCAG 2.2 specification.

The following video demonstrates the previous step:

Understand the app

Let's demonstrate the ability of Assist to understand the application at a high-level and more detailed-level.

• Provide the following prompt for high-level overview:

Provide a high-level overview of what this app does. 

• Provide the following prompt for low-level overview:

I am not a SQL expert, please explain to me the SQL Join that is used in the deliveryTable. 

The following video demonstrates the previous steps:

Edit the app

We can edit applications via Assist using an edit prompt. The following is a simple example of changing the query to use ascending order vs. descending orer.

• Use the following prompt to change the query to make it use ascending format.

For the getDeliveryData query, change it so that it displays 
order in ascending order based on the order number.

The following demonstrates the previous steps:

Summary

This lab demonstrated some of the prompt types available in Assist including create, edit, style, and understand. In addition debug and guidance prompts allow you to resolve issues when they occur along with requesting best practices or guidance in Retool.