在本教學中,我們將引導您完成使用 ToolJet 和 Gemini API 建立 AI 商業提案編寫器的流程。我們將利用 ToolJet 的預先建置元件和簡單的整合流程來快速建立一個可以與 Gemini API 互動的應用程式。該應用程式將允許用戶輸入業務詳細資訊並產生專業的業務提案。

以下是最終應用程式的預覽:

圖片描述

圖片描述


先決條件

Gemini API 金鑰:Gemini API 是Google AI Studio提供的進階 AI 服務。它使開發人員能夠將強大的內容生成功能整合到他們的應用程式中。

ToolJet (https://github.com/ToolJet/ToolJet):一個開源、低程式碼的商業應用程式建構器。[註冊](https://www.tooljet.com/signup)免費的 ToolJet 雲端帳號或使用 Docker在本機上執行 ToolJet

首先建立一個名為Business Proposal Writer 的應用程式。


  1. 建立一個新應用程式

  • 打開 ToolJet 並點擊“建立新應用程式”

  • 將您的應用程式命名為Business Proposal Writer

圖片描述

建立新應用程式後,您將看到一個空白畫布,右側有一個元件庫,底部有一個查詢面板。


  1. 設計使用者介面

將以下元件拖曳到畫布上:

  • 容器:組織標題、輸入欄位和輸出部分。

  • 文字和文字輸入:用於公司名稱、服務描述、預算、截止日期和公司專業知識。

  • 按鈕:產生提案。

  • 文字:以 HTML 格式顯示產生的提案。

  • 圖示:用於徽標並使 UI 更具吸引力。

為了清楚起見,重新命名輸入欄位:

  • companyNameInput

  • serviceDescriptionInput

  • budgetInput

  • deadlineInput

  • companyExpertiseInput

將按鈕命名為createButton

命名將把產生的提案顯示為output的文字元件。

圖片描述

ToolJet 的預先建置元件在功能和樣式自訂方面提供了完全的靈活性。


  1. 透過查詢與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}}

`

  • 導航到getContent查詢的正文部分。切換到原始 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 和雲端儲存服務的簡單方法。


  1. 將 UI 元件與查詢連接

  • 選擇createButton元件。

  • 新增事件處理程序以在點擊按鈕時觸發generateProposal查詢。

圖片描述

事件用於執行查詢、顯示警報以及基於觸發器(例如按鈕單擊或查詢完成)的其他功能。

  • 選擇為顯示查詢輸出而建立的文字元件。

  • 在其 Data 屬性下,輸入以下程式碼:

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

現在,在輸入欄位中輸入所需的詳細訊息,然後按一下按鈕。您應該在輸出元件中看到產生的業務提案。

圖片描述

圖片描述


結論

您已在短短 10 分鐘內使用 Gemini API 和 ToolJet 成功建立了一個商業提案編寫器。該工具將簡化專業商業提案的建立,節省您的時間和精力。如有任何問題或支持,請加入ToolJet Slack 社群。您也可以查看ToolJet 文件以了解更多資訊。


原文出處:https://dev.to/tooljet/build-an-ai-business-proposal-writer-using-gemini-api-and-tooljet-in-10-minutes-4j3j


共有 0 則留言