Create a Code Explanation Tool using ToolJet and Gemini API
Tags: lowcode, tooljet, restapi, gemini
Published: 2024-05-28 13:01:51

## Introduction

This tutorial will walk you through creating a code explanation tool using [ToolJet](https://github.com/ToolJet/ToolJet), a powerful low-code platform, and the [Gemini API](https://ai.google.dev/gemini-api/docs/api-overview), an advanced language model API. This tool will allow users to input code snippets and receive detailed explanations, enhancing their understanding of various programming concepts.

### Prerequisites

Before we begin, make sure you have the following:

- **ToolJet** (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform designed for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account here.
- **Gemini API** :  A cutting-edge artificial intelligence (AI) model created through a joint effort by various teams within Google. You can find more information and sign up at [Gemini API](https://ai.google.dev/gemini-api/docs/api-key) to get an API Key, that will be used later in the tutorial.

Here’s the preview of what we’re going to build.


![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrz0oa59gupam09fw0ah.png)

Once we have an idea of what we will build, let’s follow the steps below to start building our app step by step.

## Setting Up the Gemini API

- Once you have set up your account on Gemini API, navigate here to get your API Key. This key will be used to authenticate your requests.
- The endpoint for the code explanation feature looks like this: POST '[https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=YOUR_API_KEY](https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=YOUR_API_KEY)'.


![API Key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un6rd7avuw8jf0mrhece.png)

Now that we have our API Key let’s dive straight into creating the UI as the next step.

## Creating the UI

Before creating the UI, let’s create a new ToolJet App. On your ToolJet dashboard, click on the **Create an app** button and name the app **Code Explanation Tool**.

Creating a custom UI is very simple with the help of ToolJet’s [built-in components](https://docs.tooljet.com/docs/tooljet-concepts/what-are-components).

Let’s start by creating the app’s header.

- Drag and drop the **Icon** and a **Text** Component from the components library on the right and rename them _headerIcon_ and _headerText_, respectively.
- Choose an icon of your choice and customise it, under the **Styles** section.
- To configure the Text component, click on it and see the **Properties** Panel on the right.
- Set its **Data** property to 'Code Explanation Tool', and under the **Styles** section, change its colour to light blue (Hex code: #4a90e2ff), font-weight to bold and font size to 25.

![Header](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ku1le8hduyepuubwt2x6.png)

_Renaming the components will help quickly access their data during development._

- Add a **Container** component to the canvas. The Container component is used to group related components.
- Drag and drop a **Text** component, and in the **Properties** section, set its **Data** property to 'Enter your code below'.
- Next, below the text component, add a **Textarea** component, where we will add the code to get the explanation. Rename it to _codeInput_. Adjust the height and width of the component. To make the _codeInput_ component look neat, adjust the **Boxshadow** properties in the **Styles** section.
- Under the **Properties** section of the _codeInput_ component, add the following code as the **Default value**:

```
function fun_name (param1 , param2) {
  return param1 * param2 ;
}
```

![Code Input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5napix9fip2m96r1xkyt.png)

- Now that we have our _codeInput_ component in place, drag and drop a **Button** component right below it and rename it to _getExplanation_.
- Under its **Button text** property, add ‘Get Explanation’.

![Adding the button component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cvfrsar3w4cb5wzbhrz.png)

Now, let’s add the portion that will display the explanation for the code that we provide.

- Below the _getExplanation_ button, add a Text component and under the **Data** property, add the text, ‘Explanation’; under the **Styles** section, change the **Size** to 14 and **Weight** to bold.
- Below the text component, drag and drop the **Textarea** component; this is where the explanation of our provided code will be displayed. Rename it to _codeExplanation_. For now, let’s remove the **Default value** and keep it blank.

![codeExplanation component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmmng3q3wb8b1yjmhv9r.png)

With that, our UI is now ready; it’s time to build the functionality of our application.

## Creating Query

With ToolJet, we can create [queries](https://docs.tooljet.com/docs/tooljet-concepts/what-are-queries), allowing us to interact with the data stored in the data sources. In this tutorial, we will use ToolJet’s [REST API query](https://docs.tooljet.com/docs/data-sources/restapi), to use the Gemini API for the code explanation feature.

- Expand the **Query Panel** at the bottom and click the **Add** button to create a query.
- Choose the **REST API** query and rename it to _getCodeExplanation_.
- In the **Request** parameter, choose **POST** as the **Method** from the drop-down and replace the **URL** with: `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=<YOUR_API_KEY>`
- Replace `<YOUR_API_KEY>` with the API Key you generated while creating an account on Gemini API, as mentioned in the start of the tutorial.
- In the **Body** section, toggle on **Raw JSON** and replace it with the following code:

```
{{`{
  "contents": [
    {
      "parts": [
        {
          "text": "This ${components.codeInput.value.replaceAll("\n"," ")}",
        },
      ],
    },
  ],
}`}}

```

_In ToolJet, [double curly braces](https://docs.tooljet.com/docs/tooljet-concepts/how-to-access-values) `{{}}`  can be used to pass custom code and access data related to components and queries._

- To ensure that the query runs every time the application loads, enable **Run this query on application load?**
- Click on the **Run** button to run the query, and you can see that the explanation of the default value code we entered in our _codeInput_ component is provided.

![Query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zb3qsa2tmdhkt4nhywe.png)

## Binding the Query and the Query Data to the Components

As our query is running successfully and we are fetching the code explanation from Gemini API, it’s time to bind the query to our _getExplanation_ button and display the data in the _codeExplanation_ component.

- Select the _getExplanation_ button, under the **Properties** section, and click the **New event handler** button to create a new **Event**.
- Choose **On click** as the **Event**, **Run Query** as the **Action**, and select _getCodeExplanation_ as the **Query**.

![Button Event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gil68va9wot80fyamo1o.png)

This event will ensure that whenever we click the _getExplanation_ button, the _getCodeExplanation_ query is being run.

Now, let's display the code explanation in our _codeExplanation_ component.

- Select the _codeExplanation_ component, and under the **Default value** property, add the following code: `{{queries.getCodeExplanation.data.candidates[0].content.parts[0].text.replace(/\*\*/g, '').replace(/\*/g, '')}}`.
- Next, click on the _getExplanation_ button, and if you followed the above steps correctly, you should now be able to see the explanation of the provided code displayed in the _codeExplanation_ component.

![Final App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kje62014xsoe300a08h4.png)

Our app is now ready; try adding different pieces of codes in the _codeInput_ component, and to generate an explanation, click on the _getExplanation_ button to see the explanation being displayed _codeExplanation_ component.

## Conclusion

Congratulations! You've successfully created a code explanation tool using ToolJet and the Gemini API. This tool can help users understand complex code snippets, making learning and debugging more efficient. With ToolJet's low-code capabilities and Gemini's powerful language model, you can further enhance this tool by adding features like code formatting, language detection, and more.

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). Happy coding!