In this tutorial, we'll guide you through the process of creating an AI Business Proposal Writer using ToolJet and Gemini API. We will utilize ToolJet's pre-built components and simple integration process to quickly create an application that can interact with the Gemini API. This application will allow users to input business details and generate professional business proposals.

Here's a preview of the final application:

Prerequisites

Gemini API Key : The Gemini API is an advanced AI service provided by Google AI Studio. It enables developers to integrate powerful content generation capabilities into their applications.

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.

Begin by creating an application named Business Proposal Writer.

Step 1: Design the User Interface

Add a Container for the Header

1. Drag and drop a Container component onto the canvas.
2. Name it headerContainer.
3. Set its background color to #0a60c6ff.

Add a Text Component for the App Name

1. Inside the headerContainer, add a Text component.
2. Set the text to "QR Code Generator."
3. Style it with:
   • Text Color: #ffffffff
   • Text Size: 24
   • Font Weight: bold
   • Border Radius: 6

Add an Icon for the App Logo

1. Inside the headerContainer, add an Icon component.
2. Set the icon to IconQrcode and color to #ffffffff.

Add a Table with URLs and Other Information

1. Drag and drop a Table component onto the canvas.
2. Name it linksTable.
3. Below is the database table structure that we are using for this application:
   • id: Auto-generated
   • title: String
   • url: String
   • description: String
4. Populate the Table component with data, based on the provided structure.

Add a Text Component for the Table Header

1. Above the table, add a Text component.
2. Set the text to "URL Information."
3. Style it with:
   • Text Color: #0a60c6ff
   • Text Size: 24
   • Font Weight: bold

Add a Modal for QR Code Generation

1. Drag and drop a Modal component onto the canvas.
2. Name it generateButton.
3. Set the Trigger button label to "Generate QR" and the Background color to #0a60c6ff.

Add an Image Component to Display the QR Code

1. Inside the modal, add an Image component.
2. Name it qrOutput.

3. Use the below code for the Image component's URL property:
   

   data:image/png;base64,{{queries.QRGenerator.data}}
   

4. Similarly, use the below code for the Loading state property of the Image component:
   

   {{queries.QRGenerator.isLoading}}
   

The above configuration will display the generated QR code in the Image component after we craft and run the related query(named QRGenerator).

Step 2: Implement Functionality

Add a Python Script for QR Code Generation

1. Add a query named QRGenerator using the Run Python code data source.

2. Use the following Python code to generate the QR code:
   

   import micropip
   await micropip.install("qrcode")
   import qrcode
   from io import BytesIO
   import base64
   
   def QR_Generator():
       qr = qrcode.QRCode(
           version=1,
           error_correction=qrcode.constants.ERROR_CORRECT_L,
           box_size=10,
           border=4,
       )
       qr.add_data(components.linksTable.selectedRow.url)
       qr.make(fit=True)
       img = qr.make_image(fill_color="black", back_color="white")
       buffered = BytesIO()
       img.save(buffered, "PNG")  # Specify the format as a string
       img_str = base64.b64encode(buffered.getvalue()).decode('utf-8')
       return img_str
   QR_Generator()
   

This code uses the qrcode library to generate a QR code from a selected URL in a ToolJet table component. The generated QR code is converted to a base64-encoded PNG image and returned as a string.

Link the QR Generator to the Generate Button

1. Select the generateButton modal and add a new event handler to it.
2. Set up an On open event to run the QRGenerator query.
3. After the above configuration, the output of the QRGenerator query will be displayed in the qrOutput Image component based on the earlier configuration.

Step 3: Test the Application

1. Select a row on the Table component and click on the generateButton modal to generate and view the QR code.
2. You can save the QR code by right-clicking on the image and selecting Save image as. Alternatively, you can set up a Button component to download the image directly.

Congratulations

Congratulations! You've successfully built a production-ready QR code generator. This application demonstrates ToolJet's capability to rapidly design clean user interfaces and extend functionality with custom code. While we used Python code in this tutorial, ToolJet also supports JavaScript code and Custom Components for users who want to extend the platform's functionality for very specific use-cases.

For any questions or support, join the ToolJet Slack community. You can also check out the ToolJet docs to learn more!