In this byte-sized tutorial, we will build an AI Chart Generator using 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.
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.
Here's a quick preview of what we are going to build:
Let's start building the AI chart generator. Before you begin, go to the OpenAI Console and copy your secret key. Next, log in to your ToolJet account, locate the Data Sources section on the left sidebar, and configure OpenAI as a data source using the secret key.
Creating the UI
Time to build the UI. Thanks to ToolJet's pre-built 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).
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.
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.
Connecting to OpenAI via Queries
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}}
The above prompt takes the value we have passed in the dataInput(Text Area) component using double curly braces and turns it into a Plotly JSON Chart Schema.
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.
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}}.
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:
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 or connect on Slack for queries and doubt-solving.
Top comments (1)
i read later, thanks the article