Build an AI Business Proposal Writer Using Gemini API and ToolJet in 10 minutes 🚀
Tags: ai, javascript, webdev, beginners
Published: 2024-06-13 13:03:15

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:

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


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

---

## Prerequisites

**Gemini API Key** : The Gemini API is an advanced AI service provided by [Google AI Studio](https://aistudio.google.com/app/apikey). 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](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.

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:
    ```python
    data:image/png;base64,{{queries.QRGenerator.data}}
    ```
4. Similarly, use the below code for the Loading state property of the Image component:
    ```python
    {{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:
    ```python
    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](https://tooljet.slack.com/) community. You can also check out the [ToolJet docs](docs.tooljet.com) to learn more!