Create an AI Chart Generator Using ToolJet and OpenAI
Tags: javascript, lowcode, tooljet, openai
Published: 2024-05-09 13:25:38

In this byte-sized tutorial, we will build an AI Chart Generator using [ToolJet](https://github.com/ToolJet/ToolJet) and OpenAI. The chart generator will accept poorly organized data, or any text content with some meaningful statistics and convert it into a chart. We will utilize ToolJet's visual app-builder to create a fully functioning UI in minutes(under 3 minutes to be specific😎), and use its low-code query builder to interact with the OpenAI API.

**Prerequisites:**
**ToolJet** (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform designed for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account [here](https://app.tooljet.com/).

**OpenAI Account** : Register for an OpenAI account to utilize AI-powered features in your applications by accessing APIs such as GPT for advanced natural language processing. Sign up [here](https://openai.com/).

Here's a quick preview of what we are going to build:

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

Let's start building the AI chart generator. Before you begin, go to the [OpenAI Console](https://platform.openai.com/api-keys) and copy your secret key. Next, log in to your [ToolJet account](https://app.tooljet.com/), locate the Data Sources section on the left sidebar, and configure OpenAI as a data source using the secret key.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qzt29fxnul8gvu81zew.png)
</br>

## Creating the UI
Time to build the UI. Thanks to ToolJet's [pre-built components](https://docs.tooljet.com/docs/tooljet-concepts/what-are-components), we'll be able to build a custom UI in no time. 

- Drag and drop an **Icon** component and a **Text** component on the canvas from the components library on the right. 

- Select the Icon component, navigate to its properties panel on the right and select the chart icon under its Icon property. 

- Select the Text component, change its font size to 30 and font weight to bold.

- Change the colors of both the components to dark blue(hex code - #2E425A).

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

_We will use dark blue as the primary color for the rest of the components, update the remaining components accordingly._

- Add a **Container** component below it. Containers are used to group related components.

- Inside the Container component, place **Chart**, **Text Area** and **Button** components and align them vertically. 

- Rename the Chart component to _chart_ and enable the **Use Plotly JSON schema** toggle.

- Rename the Text Area component to _dataInput_.

- Rename the Button component to _generateChartButton_ and enter **Generate Chart** under its **Button Text** property.

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

_Renaming components can be useful as the application grows, allowing easy reference to component-related values throughout various parts of the application._

We are done with the UI. Let's wrap up the functionality.
<br/>

## Connecting to OpenAI via Queries

[Queries](https://docs.tooljet.com/docs/tooljet-concepts/what-are-queries) in ToolJet help interact with data sources like databases or APIs. We'll create a query that will connect our application to the OpenAI API.

- Expand the Query Panel at the bottom and create a new query.

- Select **OpenAI** as the data source and rename the query to _generateChart_.

- Select **Chat** as the **Operation** and under the **Message as input** field, enter the below text:

```
Generate a Plotly JSON chart schema based on the 
data provided in the below text:

{{components.dataInput.value}}
```

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

_The above prompt takes the value we have passed in the dataInput(Text Area) component using [double curly braces](https://docs.tooljet.com/docs/tooljet-concepts/how-to-access-values) and turns it into a Plotly JSON Chart Schema._ 
<br/>

## Linking It All Together!

Our UI is ready, along with a query that can accept data and transform it into Plotly JSON Schema. Time to connect everything together.

- Select the _generateChartButton_ component. Navigate to **Events** in the properties panel and click on **New event handler** to create a new event.

- Select the newly created event, select **On click** as the **Event**, **Run query** as the **Action**, and _generateChart_ as the **Query**.

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

_[Events](https://docs.tooljet.com/docs/tooljet-concepts/what-are-events) in ToolJet are used to run queries, show alerts and other functionalities based on triggers such as button clicks or query completion._

- Select the Chart component, and under its **JSON Description** property, pass in the data that will be returned by our generateChart query - `{{queries.generateChart.data}}`.

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

_When we click on generateChartButton, the query activates, using data from dataInput to generate a Plotly JSON schema for the Chart component._

The AI Chart Generator is fully operational! Now, let's put it to the test by inputting a paragraph with some chart-friendly statistics.

- Enter the below paragraph in the _dataInput_ component and click on the _generateChartButton_ component:

```
GitHub's dynamic landscape: 
Java leads with 40k repositories, Python follows with 35k. 
JavaScript boasts 30k, while C++ holds 25k. 
The community thrives with 10k new repositories monthly.
```
**Expected output**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wlpqb1voxtsadixdm34.png)
</br>

Congratulations on successfully building an AI Chart Generator. Although ToolJet is designed to build internal tools, the platform's flexibility and customization options allow us to push the boundaries of its standard use cases. To continue exploring, checkout the [official ToolJet docs](https://docs.tooljet.com/docs/) or connect on [Slack](https://tooljet.slack.com/) for queries and doubt-solving.