Building a Regex Generator with Gemini AI and ToolJet ⚙️

Introduction

This tutorial will guide you through the process of building an AI-powered Regex Generator using ToolJet , a low-code visual app builder, and the Gemini API, a powerful natural language processing API. The resulting application will enable users to input requests in plain English, which will then be translated into Regular Expressions (Regex). We'll use ToolJet's visual app builder to create a user-friendly UI, and ToolJet's low-code query builder to connect it to the Gemini API endpoint.

Prerequisites:

• ToolJet (https://github.com/ToolJet/ToolJet ): An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
• Gemini API Key : Log into Google AI Studio using your existing Google credentials. Within the AI Studio interface, you can locate and copy your API key.

Here is a quick preview of our final application:

Login to your ToolJet account. Navigate to the ToolJet dashboard and click on the Create new app button on the top left corner. ToolJet comes with 45+ built-in components. This will let us set up our UI in no time.

Assembling our UI

• Drag and drop the Container component onto the canvas from the component library on the right side. Adjust the height and width of the Container component appropriately.
• Similarly, drag-and-drop the Icon and Text component onto the canvas. We'll use them as our header.
• For the Icon component, navigate to the properties panel on the right and select the appropriate icon under the Icon property.
• Change the colour of the Icon and Text component according to your preference.
• Drag and drop one Text component and one Textarea component inside your canvas. We'll use these components for the label and input for our text query. Rename the Textarea component to textQueryInput.
• Again, drag-and-drop two Text components and two Text Input components inside your container. We'll use them for displaying the generated regex expressions and testing a string against the generated regex expression respectively.
• Rename the Text Input components as generatedRegex and testString respectively.
• Lastly, drag and drop two Button components inside your container. We'll use them for initiating the regex expression generation and adding a copy to clipboard functionality respectively.
• Rename the added Button components to generateRegex and copyToClipboard respectively.

Setting up Queries

ToolJet allows you to connect to various external data sources, including databases, external APIs, and services using its powerful low code query builder. For this tutorial, We'll be using the REST API query feature to connect with the Gemini API endpoints.

• Using ToolJet's Workspace Constants feature, create a new constant named GEMINI_API_KEY with your Gemini API key.
• In the query panel, click on the + Add button and choose the REST API option.
• Rename the query to getRegexPattern.
• In the Request parameter, choose POST as the Method from the drop-down and paste the following URL.

https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}

Navigate to the Body section of getRegexPattern. Toggle on Raw JSON and enter the following code:

{{
  `{
   "contents": [{
     "parts": [{
       "text": "Text Prompt: Based on pattern, generate a regex without any code highlighting, formatting or backticks, Pattern: ${JSON.stringify(components.textQueryInput.value).replace(/\\?"/g, '\\"')}"
      },],
    },],
  }`
}}

Binding Queries to the UI Components

Now that we have successfully added our UI and the query, the next step is to integrate them.

• Select the generateRegex Button component and navigate to the properties panel on the right. Click on the + New event handler button. Change the Action to Run query and select the getRegexPattern query. This will trigger the getRegexPattern every time we click the generateRegex button.
• Next, select the generatedRegex Text Input component and navigate to the properties panel on the right. Paste the following code into the Default value field:

{{queries.getRegexPattern.data.candidates[0].content.parts[0].text.trim()}}

• Select the copyToClipboard Button component and navigate to the properties panel on the right. Click on the + New event handler button. Change the Action to Copy to clipboard. Paste the following code in the Text field under the Action Options subsection:

{{components.generatedRegex.value}}

• Similarly, select the testString Text Input component and navigate to the properties panel on the right. Paste the following code in the Regex field under the Validation subsection:

{{queries.getRegexPattern.data.candidates[0].content.parts[0].text.trim()}}

We have successfully integrated everything together. Now let's test the application with the text query below:
Match any string that is at least 8 characters long, contains at least one lowercase letter, one uppercase letter, and one number

Conclusion

Congratulations on successfully creating an AI-powered Regex generator with ToolJet and the Gemini API. You can now input natural language prompts to generate Regular Expressions effortlessly.

To learn and explore more about ToolJet, check out the ToolJet docs or connect with us and post your queries on Slack.