使用 Gemini API 和 ToolJet 在 10 分钟内构建一个 AI 商业提案撰写器 🚀

3. 通过查询与 Gemini API 集成

4. 使用查询连接 UI 组件

在本教程中，我们将指导您使用 ToolJet 和 Gemini API 创建 AI 商业提案撰写器。我们将利用 ToolJet 的预置组件和简单的集成流程，快速创建一个可与 Gemini API 交互的应用程序。该应用程序允许用户输入业务详情并生成专业的商业提案。

以下是最终应用程序的预览：

先决条件

Gemini API Key ：Gemini API 是Google AI Studio提供的高级 AI 服务，它使开发人员能够将强大的内容生成功能集成到他们的应用程序中。

ToolJet ( https://github.com/ToolJet/ToolJet )：一款开源、低代码的商业应用程序构建器。您可以注册一个免费的 ToolJet 云帐户，或使用 Docker在本地机器上运行 ToolJet 。

首先创建一个名为“Business Proposal Writer”的应用程序。

1.创建一个新的应用程序

打开 ToolJet 并单击创建新应用程序。
将您的应用程序命名为“商业提案撰写人”。
创建新应用程序后，您将看到一个空白画布，右侧有一个组件库，底部有一个查询面板。

2. 设计UI

将以下组件拖放到画布上：
- 容器：组织标题、输入字段和输出部分。
- 文本和文本输入：公司名称、服务描述、预算、截止日期和公司专业知识。
- 按钮：用于生成提案。
- 文本：以 HTML 格式显示生成的提案。
- 图标：用于标识并使 UI 更具吸引力。
为了清楚起见，重命名输入字段：
- companyNameInput
- serviceDescriptionInput
- budgetInput
- deadlineInput
- companyExpertiseInput
将按钮命名为createButton。
将将显示生成的提案的文本组件命名为output。

ToolJet 的预构建组件在功能和样式定制方面提供了完全的灵活性。

3. 通过查询与 Gemini API 集成

创建一个工作区常量来保存你的 Gemini API 密钥。将其命名为GEMINI_API_KEY。
展开查询面板，创建一个新查询，并将其命名为generateProposal。
将请求方法更改为，POST并在 URL 输入下粘贴以下 URL：



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

导航到查询的BodygenerateProposal部分。切换到Raw JSON并输入以下代码：



{
  "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."
        }
      ]
    }
  ]
}

ToolJet 中的查询提供了一种简单易行的方法来连接数据库、API 和云存储服务。

4. 使用查询连接 UI 组件

选择createButton组件。
添加事件处理程序以在generateProposal单击按钮时触发查询。

事件用于运行查询、显示警报以及基于按钮单击或查询完成等触发器的其他功能。

选择output已添加的组件以显示生成的商业提案。
在其Data属性下，输入以下代码：```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!

文章来源：https://dev.to/tooljet/build-an-ai-business-proposal-writer-using-gemini-api-and-tooljet-in-10-minutes-4j3j

使用 Gemini API 和 ToolJet 在 10 分钟内构建 AI 商业提案撰写器 🚀 3. 通过查询与 Gemini API 集成 4. 使用查询连接 UI 组件

使用 Gemini API 和 ToolJet 在 10 分钟内构建一个 AI 商业提案撰写器 🚀

3. 通过查询与 Gemini API 集成

4. 使用查询连接 UI 组件

先决条件

1.创建一个新的应用程序

2. 设计UI

3. 通过查询与 Gemini API 集成

4. 使用查询连接 UI 组件