The following post comes courtesy of Christina Zhu
If it's interesting to you there's much more to check out over at the Retool Blog!
Building an AI RegEx Editor with Retool, OpenAI, and CodeMirror
Before we get started, make sure you've created a free Retool account and have your OpenAI API Key and resource integration ready to go.
Here is a link to the JSON of the app if you'd like to edit it yourself.
Showing off the AI RegEx Developer tool
Reset buttons to execute the code and see the results of the RegEx. The app also includes a handy prompt history on the left panel, which helps you keep track of your previous prompts!
Today we will be breaking this app down into four parts and going through how to do each of them:
- The OpenAI API resource call
- The basic UI in Retool
- Using custom components to create our CodeMirror editor
- Using temporary variables to keep track of the state of our app
OpenAI Resource Setup
The first part of the app is powered by an OpenAI API call to their text model. Our Retool OpenAI integration guide provides step-by-step instructions on how to set up your very own OpenAI resource, so be sure to check that out! Once you’ve set that up, you can start using it in your app. Our app uses the
text-davinci-003 model of OpenAI to generate RegEx patterns and combined them with the
RegExPrompt.value in Retool to pass our prompt to OpenAI. We also set our
top_p to 1 and
temperature to 0.7 - these values determine the “creativity” and “randomness” of our generated RegEx expressions, which should still be reliable and accurate but also offers a bit of variation.
Retool UI Components
In creating our AI RegEx Developer app, we utilized several different Retool UI components to make it come to life and make it user-friendly. Retool components are prebuilt, modular, and reusable interface elements that are designed to display data in an easy drag-and-drop interface. These components have an internal state and can trigger events based on user interactions, enabling us to perform actions and queries. Additionally, Retool offers preset for commonly used configurations, which we utilized in our app.
We utilize the following components in our application:
- Text Area - Used to display text, such as previous prompts
- Sidebar - A navigation component that we used to show our prompt history using the navigation properties.
- Text Input - Used to get the prompt from the user, as well as ask the user for test strings to run the code on
- Buttons - Combined with our event handlers to run our OpenAI, CodeMirror and prompt history queries and control most user interactions
CodeMirror & Custom Components
Now that we have our prompt for our RegEx as well as an example piece of RegEx from OpenAI, we need to put it in our CodeMirror editor to test and execute it. This component uses CodeMirror to edit code and evaluate it and provides a way for us to test it directly inside our Retool app. We utilize custom components in Retool to get this working, which allows us to extend Retool’s functionality beyond what’s currently possible with our component library.
The script section of the code contains the bulk of our component logic, including functions for initializing our CodeMirror editor, setting and running the code, as well as handling the majority of the updates to the data model from Retool.
When our model is updated, the component then checks if our RegEx and test strings have changed since our last run. If they have, our component updates the text inside the CodeMirror editor to include the new data, and then runs this once a test run is requested, we print the results in the Retool app in our
RegExMatchesDisplay textArea component.
Temporary State & Variables
The last section of our application is the left-hand panel which uses temporary states in Retool to store our previous prompts to OpenAI. Temporary states are an essential feature in Retool that allows us to store and manipulate data, and in this app in particular, we use temporary states to keep track of various variables and user interactions, such as the previous prompts as well as the current RegEx and test strings.
We track several different states here in our application, and here's a short explanation of all of them and what they're used for:
|TEMPORARY STATE VARIABLE||EXPLANATION|
||Stores the current RegEx being used in|
|the app. Changes based on the OpenAI call.|
||The current test strings declared by|
||Records the index of the last prompt that was run,|
and is updated whenever a prompt is run so that
the app knows which prompt to run next.|
promptHistory|Displays the previous prompts entered by the user
and updated whenever a new prompt is entered|
resetIndex|Stores the index at which the user wants to reset
the prompt history|
In conclusion, Retool is a very powerful platform for building quick tools to help enable developers to be more productive without having to write a ton of code. The key features that allow Retool to be so versatile are our ability to connect to various APIs such as OpenAI and our ability to create custom components, as shown above. By leveraging Retool’s query editors, temporary states, and components, we’re able to create custom tools such as this RegEx generator app that can help save time and improve a developer’s workflow. With Retool, the possibilities are endless, and we hope this blog post has inspired you to build your own little tools, wrappers, and applications in the future!