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.

1. Create a New Application

• Open ToolJet and click on Create new application.
• Name your application "Business Proposal Writer."
• Once you create a new application, you will see an empty canvas with a component library on the right and a query panel at the bottom.

2. Design the UI

• Drag and drop the following components onto your canvas:

  • Containers: To organize the header, input fields, and output section.
  • Text and Text Inputs: For company name, service description, budget, deadline, and company expertise.
  • Button: For generating the proposal.
  • Text: To display the generated proposal in HTML format.
  • Icons: For logos and making the UI more appealing.

• Rename the input fields for clarity:

  • companyNameInput
  • serviceDescriptionInput
  • budgetInput
  • deadlineInput
  • companyExpertiseInput

• Name the button createButton.

• Name the text component that will display the generated proposal as output.

ToolJet's pre-built components offer complete flexibility in functionality and styling customization.

3. Integrating with Gemini API through Queries

• Create a workspace constant to save your Gemini API key. Name it GEMINI_API_KEY.
• Expand the query panel, create a new query, and name it generateProposal.
• Change the Request Method to POST and paste the following URL under the URL input:

https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}

• Navigate to the Body section of the generateProposal query. Toggle on Raw JSON and enter the following code:

{
  "contents": [
    {
      "parts": [
        {
          "text": "
1. **Client/Company Name:** {{components.companyNameInput.value}}
2. **Project/Service Description:** {{components.serviceDescriptionInput.value}}
3. **Budget Range (if applicable):** {{components.budgetInput.value}}
4. **Deadline:** {{components.deadlineInput.value}}
5. **Company Expertise:** {{components.companyExpertiseInput.value}}

Based on these inputs, generate a well-structured and comprehensive business proposal document in HTML format. The generated proposal should include the following sections, each with ample padding and spacing:

1. **Executive Summary**
2. **Company Overview and Qualifications**
3. **Project Understanding and Approach**
4. **Proposed Solution and Methodology**
5. **Timeline and Deliverables**
6. **Team Structure and Bios**
7. **Cost Breakdown and Budget** (Include charts as needed)
8. **Terms and Conditions**
9. **Conclusion and Call to Action**

Ensure that the HTML output is properly formatted and visually appealing."
        }
      ]
    }
  ]
}

Queries in ToolJet offer a simple and easy way to connect with databases, APIs, and cloud storage services.

4. Connecting the UI Components with Queries

• Select the createButton component.
• Add an event handler to trigger the generateProposal query when the button is clicked.

Events are used to run queries, show alerts, and other functionalities based on triggers such as button clicks or query completion.

• Select the output component that was added to display the generated business proposal.
• Under its Data property, enter the following code: ```json

{{queries.generateProposal.data.candidates[0].content.parts[0].text}}

- Now, enter the required details in the input fields and click on the button. You should see the generated business proposal in the output component.


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


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

---

## Conclusion

You have successfully built a business proposal writer using the Gemini API and ToolJet in just 10 minutes. This tool will streamline the creation of professional business proposals, saving you time and effort. 

For any questions or support, join the [ToolJet Slack community](https://join.slack.com/t/tooljet/shared_invite/zt-2l2i9tuls-NNCZPBlPAi2flYIhrjBqHA). You can also check out the [ToolJet documentation](https://docs.tooljet.com) to learn more!