Create a Code Explanation Tool using ToolJet and Gemini API

Introduction

This tutorial will walk you through creating a code explanation tool using ToolJet, a powerful low-code platform, and the Gemini API, 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 to get an API Key, that will be used later in the tutorial.

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

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'.

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.

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.

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 ;
}

• 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’.

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.

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, allowing us to interact with the data stored in the data sources. In this tutorial, we will use ToolJet’s REST API query, 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 {{}} 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.

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.

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.

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 or connect with us and post your queries on Slack. Happy coding!