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 Gemini API. This application will allow users to input business details and generate professional business proposals.

Here’s a preview of the final application:

Business Proposal Generator Preview 1
Business Proposal Generator Preview 2

Prerequisites

Gemini API Key : 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 (Github – ToolJet) : An enterprise-grade ai native open-source , low-code business application builderSign 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.
Create a new ToolJet app - ai business proposal

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: To generating the proposal.
    • Text: To display the generated proposal in HTML format.
    • Icons: For logo 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.
UI for the Ai Business Proposal Generator

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

3. Integrating with Gemini API through Queries

{
  "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."
        }
      ]
    }
  ]
}
Create a query to connect to Gemini API - ai business proposal

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.
Use Events with Query for Business Proposal Generator - ai business proposal

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 below code:

{{queries.getContent.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.

Output Preview of Ai Business Proposal Generator 1 -
Business Proposal Writer Output Preview 2

Conclusion

You have successfully built ai business proposal writer using the Gemini API and ToolJet in just 10 minutes. Alternatively you can use text writing chrome extensions. 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. You can also checkout the ToolJet docs to learn more!