Build an AI Content Generator Using Gemini API and ToolJet in 10 Minutes 🛠️

#webdev #javascript #beginners #geminiapi

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:

Prerequisites

ToolJet (https://github.com/ToolJet/ToolJet) : An open-source , low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
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.

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 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).

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

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.

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 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. 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}}.

You can log into Google AI Studio 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}"
            }
          },],
      },],
    }`
  }}

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 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).

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.

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 or join us on slack. Happy coding!!