Building a Regex Generator with Gemini AI and ToolJet ⚙️
Published: 2024-07-02 13:02:20

## Introduction
This tutorial will guide you through the process of building an AI-powered Regex Generator using [ToolJet](https://github.com/ToolJet/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](https://www.tooljet.com/signup) for a free ToolJet cloud account or [run ToolJet on your local machine](https://docs.tooljet.com/docs/setup/try-tooljet/) using Docker.
- **Gemini API Key** : Log into [Google AI Studio](https://aistudio.google.com/app/apikey) 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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0i4mm3nmx59f29efkj7z.png)


Login to your [ToolJet account](https://app.tooljet.com/). 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.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rulz6yc960geeqvosxwq.png)


-------------------------------------------------------------


## 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_


![Image description](https://tooljet-test.s3.us-west-1.amazonaws.com/Regex-Generator-ToolJet-example.png)


-------------------------------------------------------------


## 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](https://docs.tooljet.com/docs/) or connect with us and post your queries on [Slack](https://join.slack.com/t/tooljet/shared_invite/zt-2ij7t3rzo-qV7WTUTyDVQkwVxTlpxQqw).