Build an AI Content Generator Using Gemini API and ToolJet in 10 Minutes 🛠️
Tags: webdev, javascript, beginners, geminiapi
Published: 2024-06-04 13:18:51

In this quick tutorial, we'll build an AI-powered content generator using the Gemini API and ToolJet, all within just 10 minutes. This app will generate content based on the uploaded images, selected content type, and additional info entered by the user. Whether you need titles, short descriptions, long descriptions, creative stories, blog post outlines, full blog posts, social media captions, or advertising copies, this app will have you covered. Follow along to use ToolJet's rapid development process and Gemini's advanced AI capabilities to seamlessly integrate content creation into your workflow.

Here is a preview of our final application:

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

---

## Prerequisites
- ToolJet (https://github.com/ToolJet/ToolJet) : An open-source , low-code business application builder. [Sign up](https://www.tooljet.com/signup) for a free ToolJet cloud account or [run ToolJet on your local machine](https://docs.tooljet.com/docs/setup/try-tooljet/) using Docker.


- Gemini API Key : Gemini API is an advanced AI service provided by [Google AI Studio](https://aistudio.google.com/app/apikey). It enables developers to integrate powerful content generation capabilities into their applications. 

---

## Step One - Designing the UI 🎨

Begin by creating an application named _AI Content Generator_. 

Once the app is created, we can start designing the UI with ToolJet's pre-built components.

- Drag and drop a **Container** component from the [components library](https://docs.tooljet.com/docs/tooljet-concepts/what-are-components) on the right and adjust its size so that it covers most of the canvas.

- Drop an **Icon** component and **Text** component on the container. Then, rename the Icon component to _logo_ and the Text component to _logoText_.

- Select the Icon component to see a properties panel on the right. Select **IconListSearch** as the icon.

- For the Text component, enter _AI Content Generator_ under its **Text** property, and adjust its font weight and text size. 

- Change the color of the Icon and Text components to dark blue (Hex code - #354094). 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kf3k3orw0yckdn786unl.png)
_This tutorial uses dark blue(#354094) as the primary color. Update the colors of your components accordingly in the upcoming steps. Feel free to use a different color scheme._

- Add an **Image** component and a **Text** component below the header that we just created. Rename them to _imagePreview_ and _output_ respectively. _imagePreview_ will display a preview of the uploaded image and _output_ will display the generated text based on the image and selected options.
- Add a **File Picker** component below the image and rename it to _imageUploader_.
- Place a **Dropdown** component and **Text Input** component next to it. Rename them to _typeOfContentInput_ and _additionalInfoInput_ respectively.
- For the Text Input component, enter the below value under **Placeholder** property:
`Enter additional information`
- For the Dropdown component, paste the below array under **Option values** and **Option labels** properties using double curly braces:

```
{{["Title", "Short Description (1-2 sentences)", "Long Description (paragraph)", "Creative Story", "Blog Post Outline", "Blog Post", "Social Media Caption", "Advertisement Copy"]}}

```
- Enter the below value under the Dropdown component's Placeholder property:
`Select type of content`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqnp25tphss8np3to3fc.png)
_Renaming components can be useful when the application has a large number of components and we need to refer to component-related values inside the app._

- Add a **Button** component at the bottom as the last step in the UI building process. Rename the component to _generateContentButton_.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u25jhdxw86aeqkr5yx2k.png)
We've designed a simple UI for this application, which you can fully customize to meet your specific requirements. ToolJet offers extensive flexibility, allowing you to define and arrange components exactly as you envision.

---

## Step Two - Integrating AI Capabilities 🛠️

With the UI complete, we can use ToolJet's [queries](https://docs.tooljet.com/docs/tooljet-concepts/what-are-queries) to connect with Gemini API and get a response based on the uploaded image, content type, and additional information that we enter in the components.

To protect your Gemini API key, we'll leverage ToolJet's [Workspace Constants](https://docs.tooljet.com/docs/tooljet-concepts/workspace-constants). This way, your key remains hidden and secure.

- Click on the ToolJet logo in the top left corner. From the dropdown, select Workspace constants.
- Click on the **Create new constant** button. Set the name as _GEMINI_API_KEY_ and enter your Gemini API key in the value input.
Click on the **Add constant** button. This constant will now be available across our workspace and can be accessed using `{{constants.GEMINI_API_KEY}}`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og7gvo56vva0t2ziu25j.png)
_You can log into [Google AI Studio](https://aistudio.google.com/app/apikey) using your existing Google credentials. In the AI Studio interface, you'll be able to locate and copy your API key._

- Navigate back to your app and expand the **Query Panel** at the bottom.
- Click the **+ Add** button and choose the **REST API** option. Rename the query as _getContent_.
- Change the Request Method as **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 _getContent_ query. Toggle on **Raw JSON** and enter the following code:

```
{{
    `{
     "contents": [{
       "parts": [{
         "text": "Generate the following content for this image in markdown format:
         content type: ${components.typeOfContentInput.value},
         additional info: ${components.additionalInfoInput.value}"
        },
        {
            "inline_data": {
              "mime_type":"image/jpeg",
              "data": "${components.imageUploader.file[0].base64Data}"
            }
          },],
      },],
    }`
  }}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnelq2jt9zmbjxa4k3tw.png)
_In the above configuration, we are creating a structured JSON payload that combines user-input text and image data. The JSON object is then sent to the Gemini API endpoint to process the provided content and image._

---

## Step Three - Binding Data to Components 🔗
With the query ready, we can setup a way to trigger it every time the Button component is clicked.

- Select the Button component, and navigate its properties panel on the right.
- Under **Events**, click on **[New Event Handler](https://docs.tooljet.com/docs/tooljet-concepts/what-are-events)** to create a new event.
- For the new event, select **On click** as the Event and **Run Query** as the Action.
- Select _getContent_ as the Query (the query created in the previous step).

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

Now, every time the Button component is clicked, the _getContent_ query will be triggered, and it will return the AI-generated content based on the uploaded image and user input.

Next, we will populate the Text(_output_) component with the value returned by the _getContent_ query using the below steps:

- Select the Text (_output_) component that was created for the output of the query.
- Under its **Data** property, enter the below code:
`{{queries.getContent.data.candidates[0].content.parts[0].text}}`

Similarly, populate the Image component with the uploaded image from the File Picker component:

- Select the Image component.
- Under its **URL** property, enter the below code:
`{{'data:image;base64,' + components.imageUploader.file[0].base64Data}}`

Our application is now ready. Let's give it a spin and see the results. Select an image, choose a content type, enter some additional info, and click on the generate button. We should now be able to see the preview of the image and AI-generated text output.


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

---

## Conclusion

We've now built a fully functional AI-powered content generator using the Gemini API and ToolJet in just 10 minutes. This application demonstrates how seamlessly ToolJet's rapid development environment integrates with Gemini's advanced AI capabilities to automate content creation based on user inputs.

To explore more, checkout [ToolJet docs](https://docs.tooljet.com/docs/) or join us on [slack](https://tooljet.slack.com/). Happy coding!!