Retool AI Actions for apps quickstart

Learn how to use AI Actions in apps to interact with AI models.

With Retool AI, you can build AI-powered apps. AI actions enable you to interact with AI models using your data and perform a range of actions, such as:

• Generate text, images, and chat responses.
• Analyze, classify, and summarize text.
• Generate images.

AI actions are available to in both apps and workflows. The following guide explains how to create a web app that automatically completes a return request for a customer's defective product. It uses AI Actions to generate a fake support ticket and extract relevant information to prefill input fields in a form.

To get started, sign in to your Retool organization and click Create > App.

1. Generate a support ticket

For the purposes of this app, the Generate text AI Action is used to generate a fake support ticket.

1. Click Code in the left sidebar.
2. Click + > AI Action to create a new AI Action query.

Select the Generate text action and enter the following input:

Input

Write a sample support ticket from a customer who is reporting
a problem with some keys not working on their VelocityX Pro keyboard.

This should include a fake email address, shipping address,
order number, phone number, and contact name.

Click Save and then Run to test the AI Action. Rename the query to generateTicket.

2. Get customer details for a return

The Extract entities from text AI Action can get specific information about provided text and return it as key-value pairs. In this case, this action extracts the relevant information needed to process a return. Add another AI Action and select Extract entities from text.

You can use JavaScript and reference values almost anywhere in Retool using {{ }} notation. Set the Input field of the query to {{ generateTicket.data }} so that the generated ticket is used for extraction.

Enter the following values into the Entities to extract field—this will be the information used by the returns form.

• customer name
• email address
• shipping address
• order number
• phone number
• reason for return

Save the query and rename it to getReturnsInfo.

3. Display the support ticket

The app should display the support ticket for review to ensure that the extracted information in the return form is correct. Click ⊕ in the left sidebar to access the component library and add a Text component to the canvas.

Set the Text component's Default value to {{ generateTicket.data }} to display the generated support ticket.

Rather than waiting for the full response, Retool receives the response stream. This allows the AI model to immediately start responding so you can see the response appear in real time. Run the generateTicket query again to see the response as it is generated.

4. Build the returns form

Now that the app generates and displays a support ticket, the next step is to build the returns form.

Add a Form component to the canvas. Click Add components to add the following input fields with the respective name and default value.

Component	Name	Default value
Text Input	customerName	{{ getReturnsInfo.data["customer name"] }}
Email	customerEmail	{{ getReturnsInfo.data["email address"] }}
Phone	customerPhone	{{ getReturnsInfo.data["phone number"] }}
Text Area	customerAddress	{{ getReturnsInfo.data["shipping address"] }}
Text Area	reason	{{ getReturnsInfo.data["reason for return"]}}
Text Area	order number	{{ getReturnsInfo.data["order number"]}}

To rename a component, click the name at the top of the Inspector.

5. Automatically populate the return form

With the interface complete, edit the generateTicket query so it triggers getReturnsInfo automatically.

1. Add a Success event handler.
2. Set the Action to Control query.
3. Select getReturnsInfo as the query to control.
4. Set Method to Trigger.

Now when generateTicket runs, it triggers getReturnsInfo immediately after. Since the input fields in the returns form reference this query, their values update once the query completes.

Wrap up

You have now built an AI-powered Retool app that:

• Generates text content.
• Extracts specific information needed for a task.
• Automatically populate input fields.