Filtering data in Retool is essential for any process, whether you’re managing invoicing, tracking customer orders, or analyzing sales patterns. Traditionally, filters are built up using dropdowns, text inputs, and manual SQL queries. What if you could ask your app for exactly what you want in simple English?
Using artificial intelligence, we can dynamically read user inputs and translate them into structured filters, making data discovery in Retool faster, more intuitive, and extremely powerful.
In this post, I’ll walk you through the steps I took to create AI-driven filters in Retool. Whether you’re a beginner or an established user, you’ll discover how simple it is to incorporate AI into your data workflows and how it can change the way you interact with your data.
The problem with Traditional Filters
Manual filters are incredibly useful and work seamlessly with Retool’s built-in table settings. However, when dealing with complex datasets that require multiple filters, the process can quickly become tedious and unintuitive. Users have to manually select the right options across different fields, which can be time-consuming—especially when working with large amounts of data.
On top of that, onboarding new users becomes a challenge. They need to familiarize themselves with the available filter options and understand how each selection affects the data. This learning curve not only slows down workflows but also increases the chances of errors or missed insights.
The solution and How to Build it
With Retool’s built-in AI Actions, you can take filtering to the next level by making it faster, smarter, and more intuitive. Instead of manually selecting options, you can simply describe what you need in a prompt, and the AI will handle the rest.
By combining user input with existing filter data, the AI can accurately interpret requests and apply the right filters instantly. This reduces errors and ensures more precise results, all while making data exploration effortless.
To begin building your AI powered filters, you will need a Retool Account, which you can sign up for here. On a new app, build out a basic layout, like the one below to get started.
All you need is a Text Area, a Button, multiple Selects, a Multiselect, and a Table. The table will come with Data in it already, so for now we will use this in the demonstration. In your Selects and Multiselects, populate the options with either Mapped values from an array, or manually enter your values. Next, let’s create an AI Action that will accept these inputs, and give us something to use in the Filters.
After creating your AI Action, provide an Input, being your Text Area where the user would type the prompt, as well as all Filter Data, as seen below:
This provides the AI with the prompt, the values in your Selects and Multiselects (in this case, the Is Enabled is only yes or no, so there is no need to pass this, as we will define it in the System Message). In System Message, we need to provide an Instruction to the AI on how to use this Data. Feel free to copy the code below, and change it where you find fit.
Using this prompt, fill the filters using the available options, and is_enabled should just be 0 or 1.
Fill it in this format
{
“role”: “Viewer”,
“is_enabled”: 1,
“teams”: [“Workplace”, “Sales”]
}
We provide a format to ensure the AI knows exactly which format we want the Data to be returned to us in. For the Model option, we recommend gpt-4-turbo, as it will provide a faster processing time compared to the other options. Run this query manually to see the result, it should look something like this:
To now use this data provided to us by the AI, we must first Parse this, to put it into a more usable value. This can be done on each Selector, but the best practice is to Parse it in a Transformer. To create a Transformer, navigate to Code, and then create a new Transformer.
Paste the provided code as seen in the video, which parses the AI’s response into a format we need to use next.
const aiData = {{ JSON.parse(createFilters.data) }}
return aiData;
The Transformer will automatically run whenever the AI Action runs, as it is dependent on createFilters.data.
Next, we’ll connect the AI-generated data to our filters and add functionality to the button we created earlier. The AI response is processed through a Transformer, which structures the data in a usable format. Now, we’ll use this transformed data to automatically populate the filters.
1️⃣ Click on any selector component in your Retool app.
2️⃣ In the Attributes panel, find the Default Value field.
3️⃣ Set the Default Value to pull the corresponding data from the Transformer, like this:
{{ parseJSON.value?.role }}
Do this for all Selectors and Multiselectors.
Next, on the button you originally added, create an Onclick Event Handler, which triggers the createFilters AI Action. You can even add a Loading value as “{{ createFilters.isFetching }}” to provide a visual cue that the AI Action is running.
Once this is complete, enter a prompt, for example:
“I need to make filters to show me only Editors that are disabled and work in Sales and Workplace”
And watch as your filters are automatically entered, using your new AI Action and Transformer.
Let’s Conclude
AI-powered filters in Retool aren’t just a convenience—they’re a game-changer. By allowing users to filter data with natural language, you simplify workflows, reduce manual effort, and make data exploration far more intuitive.
With just a few steps, you can integrate AI into your filtering process, making it faster and more accurate while reducing human error. Whether you’re managing invoices, tracking customer orders, or analyzing trends, AI filters can transform the way you interact with your data.
Leave a Reply