使用 ToolJet + Gemini API 构建 SQL 查询生成器

介绍

本教程将指导您使用低代码可视化应用构建器 ToolJet和强大的自然语言处理 API Gemini API 构建一个 AI 驱动的 SQL 查询生成器。最终生成的应用程序允许用户输入纯英文提示，并将其转换为可执行的 SQL 查询。我们将使用 ToolJet 的可视化应用构建器创建用户友好的界面，并使用 ToolJet 的低代码查询构建器将其连接到 Gemini API 端点。

先决条件：

• ToolJet（https://github.com/ToolJet/ToolJet）：一个开源的低代码企业应用构建器。 注册一个免费的 ToolJet 云帐户，或使用 Docker在本地计算机上运行 ToolJet。
• Gemini API 密钥：使用您现有的 Google 帐户登录Google AI Studio。在 AI Studio 界面中，您可以找到并复制您的 API 密钥。

以下是我们最终申请文件的简要预览：

打造我们的用户界面

• 登录您的ToolJet 帐户。导航至 ToolJet 控制面板，然后点击左上角的“创建新应用”按钮。ToolJet 内置 45 多个组件，这将帮助我们快速搭建用户界面。
• 从右侧组件库中将容器组件拖放到画布上。根据需要调整容器组件的高度和宽度。
• 同样地，将图标和两个文本组件拖放到容器内。我们将使用这两个文本组件分别作为标题和署名文本。
• 选择图标组件，导航到右侧的属性面板，然后在图标属性下选择数据库图标。
• 您可以根据个人喜好更改图标和文本组件的颜色。这里我们将使用一种蓝色（十六进制代码：#4A7EE2）。
• 适当地更改文本组件的字体大小和内容。

• 将下拉菜单组件拖放到容器中。我们将使用此组件来选择Gemini API提供的模型。
• 将此组件重命名为modelDropdown。重命名组件有助于在开发过程中快速访问其数据。
• 同样地，将三个文本区域组件拖放到容器中。我们将使用这些组件分别作为数据模式输入、文本查询输入以及显示生成的 SQL 查询语句。
• 将三个Textarea组件分别重命名为databaseSchemaInput、textPrompt和generatedQuery。
• 适当调整文本区域组件的高度和宽度。
• 在“属性”部分，清除“默认值”输入框，然后输入合适的占位符文本。
• 拖放另一个文本组件。我们将把它用作生成的查询文本区域组件的标签。根据需要更改颜色、字体大小和内容。
• 我们来添加最后一个组件，拖放一个按钮组件。我们将使用它来触发 SQL 查询的生成。请根据需要更改按钮的颜色、大小和内容。

创建查询

ToolJet 允许使用其 REST API 查询功能连接到第三方 API。我们将使用此功能将我们的 UI 与 Gemini API 端点集成。我们将创建两个独立的 REST API 查询：

1. 第一个查询将获取Gemini API提供的所有 AI 模型列表。
2. 第二个查询将是一个 POST 请求，它会将用户输入发送到Gemini API 端点。它将返回基于这些输入生成的 SQL 查询。

我们还将利用 ToolJet 的工作区常量来安全地存储Gemini API 密钥。工作区常量在服务器端解析。这确保了常量的实际值不会随网络负载一起发送；相反，服务器会解析这些值，从而防止客户端泄露。

• 要创建工作区常量，请单击左上角的 ToolJet 徽标。从下拉菜单中选择“工作区常量”。
• 点击“创建新常量”按钮。将名称设置为GEMINI_API_KEY ，并在值输入框中输入您的Gemini API 密钥。
• 点击“添加常量”按钮。该常量现在将在我们的工作区中可用，并可通过以下方式访问{{constants.GEMINI_API_KEY}}。
• 返回您的应用程序并打开查询管理器。
• 点击 “+ 添加” 按钮，然后选择 REST API选项。
• 将查询重命名为getModels。
• 请求方法保持为GET，并将以下 URL 粘贴到 URL 输入框中。这是 Gemini API 端点，它将返回可用的模型。

https://generativelanguage.googleapis.com/v1beta/models?key={{constants.GEMINI_API_KEY}}

• 为确保每次应用程序加载时都运行查询，请启用“ 在应用程序加载时运行此查询？”开关。
• 同样地，创建另一个查询并将其命名为getSqlQuery。
• 在 请求 参数中，  从下拉菜单中选择POST作为方法，然后粘贴以下 URL。

https://generativelanguage.googleapis.com/v1beta/{{components.modelDropdown.value}}:generateContent?key={{constants.GEMINI_API_KEY}}

• 导航至getSqlQuery的 Body 部分。启用 Raw JSON 并输入以下代码：

{{
  `{
   "contents": [{
     "parts": [{
       "text": "Data Schema: ${components.databaseSchemaInput.value.replaceAll("\n"," ")}, Text Prompt: Write a standard SQL query that will ${components.textPrompt.value.replaceAll("\n"," ")}. Return with correct formatting but without any code highlighting and any backticks"
      },],
    },],
  }`
}}

将用户界面与查询功能集成

现在我们已经成功构建了用户界面和查询，下一步就是将它们集成起来。

• 在“属性”部分下选择 “按钮”组件，然后单击 “新建事件处理 程序”按钮以​​创建新事件。
• 选择“单击”作为事件，“运行查询”作为操作，并选择“getSqlQuery”作为查询。
• 在“属性”部分下选择“下拉列表”组件，然后输入以下代码作为选项值和标签。

选项值：

{{queries.getModels.data.models.map(item => item.name)}}

选项标签：

{{queries.getModels.data.models.map(item => item.displayName)}}

• 在“属性”部分下，选择generatedQuery Textarea组件，然后为“默认值”输入输入以下代码。

默认值：

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

我们的AI驱动的SQL查询生成器已经完成。让我们提供一些示例数据来测试一下。

数据库架构：

Orders (id, product_id, address, customer_name, is_paid)
Products (id, quantity, moq)
Customers (id, name, email, phone, addresses)

文本提示/查询：

find all the prepaid orders from a customer named Alex JR

预期输出：

结论

恭喜您使用 ToolJet 和 Gemini API 成功构建了 AI 驱动的 SQL 查询生成器。现在，您可以输入纯英文提示，系统会将其准确转换为可执行的 SQL 语句。
要了解更多关于 ToolJet 的信息，请查看 ToolJet 文档 ，或联系我们并在 Slack上发布您的问题。