.webp)
Experience the power of Luzmo. Talk to our product experts for a guided demo or get your hands dirty with a free 10-day trial.
Language learning models like Mistral, Gemini, GPT-3 and GPT-4 are extremely valuable for many use cases. With natural language processing tools (NLP), you can easily generate, translate or summare text. And of course, you can ask it questions in your language of choice.
Language models, however, are designed to generate text. Not images, diagrams or other visual content that requires artistic composition. Like, for example, an analytics dashboard. So, how can you use language learning models (LLM) to build powerful analytics applications? Should you even consider using it at all?
The short answer is yes. Because AI models like GPT contain so much domain knowledge and context, there are smart ways to leverage this powerful technology, even for machine-to-machine communication.
In this article, we will walk you through a demo of how to create AI-powered dashboards using GPT-3.5 and Luzmo (formerly Cumul.io). You’ll also get some tips on how to adjust or build similar scripts for your specific analytics use case!
AI dashboards are a collection of interactive widgets, such as charts and graphs, generated automatically by artificial intelligence tools. Just like any business dashboard, AI dashboards help you make better, informed decisions.
One of the biggest differences with regular dashboards, however, is the user experience. With AI dashboards, you no longer have to decide upfront which data points you want to analyze. Instead, you can simply ask AI which data is interesting to visualize, streamlining the entire data analysis process.
Compared to traditional data visualization tools like Tableau or Microsoft Power BI, AI-powered dashboard tools can provide a user-friendly alternative to data-driven decision-making.
From our experience of working with +250 SaaS customers who create dashboards day in day out, we learned that one of the main challenges is to decide what to visualize on a dashboard. Which information is interesting to your business or to your product users?
There are different ways to uncover that business knowledge.
Or, you can save yourself loads of time, and use artificial intelligence. GPT can inject all the contextual information you need into your process of figuring out what to visualize, based on what it knows through language processing.
In this article, you’ll walk through a demo that auto-generates dashboards using GPT-3 and Luzmo’s embedded analytics platform. To follow along, simply clone our GPT dashboard generation repo on GitHub.
Not a developer, but still want to benefit from AI-generated dashboards? You can also create AI-powered charts and dashboards straight from Luzmo’s no-code interface! Start a free 10-day trial here to create charts through simple prompts, or explore recommended charts for your dataset.
Moving forward with the coding tutorial, the goal of our script is to create an automated dashboard based on any dataset you already have available. OpenAI will function as an “insights miner” to tell you what’s interesting to visualize, and how to visualize it. We’ll then return its output to Luzmo’s API to automatically create AI-powered dashboards on top of it.
Why do it in code if you can also do it from the user interface? The advantage of using Luzmo’s API-first platform is that you could use any AI technology of your choice! We’re using OpenAI’s GPT-3.5, but you could just as easily replace it with GPT-4 or Gemini, simply by letting the two APIs communicate.
The demo in this article is just a simple example of the possibilities this opens up to build strong applications with AI.
Below, we’ll walk through the code in detail. Want to get started immediately? Watch this short video, and get your project up and running in just a few minutes!
🚨 Our embedded analytics platform, formerly called Cumul.io, is now Luzmo! You can read all about our rebranding here. To avoid confusion: the GitHub repos and code snippets used in this tutorial may have references to Cumul.io. But fear not! Any code that you'll leverage in this tutorial is still fully functional. So simply follow along, and if you'd happen to run into any issues, you can reach us at support@luzmo.com.
In short, this tutorial will discuss a script that automatically generates an AI dashboard in three simple steps.
Now that you know what the end result will be, let’s walk through the demo in more detail.
Before you can get started, you will need:
For this demo, we’re using the Airlines Customer Satisfaction dataset from Kaggle.
Before you can start retrieving any datasets, you’ll make a connection with the OpenAI and Luzmo (Cumul.io) APIs, and connect the two of them together.
The code snippet below will do exactly that.
constructor() {
this.initialized = false;
this.idsSeen = [];
this.cumulio = new Cumulio({api_key: process.env.CUMULIO_API_KEY, api_token: process.env.CUMULIO_API_SECRET});
this.openai = new OpenAIApi(new Configuration({
apiKey: process.env.OPENAI_API_SECRET,
}));
console.log('[AI] Listening for new Cumul.io datasets')
}If you haven’t worked with Luzmo and/or OpenAI before, you’ll also need to create an API key for both platforms. For more information, check out the relevant developer docs.
Now that you’ve set up a connection, you’ll run the following snippet to retrieve your datasets. This code retrieves every new dataset in your Luzmo account since the last time you ran it. It will initialize with all your existing sets on the first run only, so only sets added while running the code will be considered.
async getNewDatasets() {
if (!this.initialized)
console.log('Initializing with existing sets');
else
console.log('Checking for new sets');
return await this.cumulio.get('securable', {
attributes: ['id', 'name'],
where: {
type: 'dataset',
id: {notIn: this.idsSeen ?? []}
},
include: [{
model: 'Column',
attributes: ['id', 'type', 'name', 'stats'],
}]
});
}
Now, you’ve retrieved the dataset name, id, and all the columns included in each dataset. Once you start this script, it will keep listening to new datasets as you add them to your account.
You can modify this code to your liking. For example, you could edit the script and only retrieve one specific dataset.
First, you’ll perform an API call to OpenAI in order to input a prompt into the system, just like you would type a prompt in ChatGPT.
const completion = await this.openai.createCompletion({
model: 'text-davinci-003',
prompt: prompt,
temperature: 0.7,
max_tokens: 1024,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0
});This snippet includes a couple of parameters to shape our request, for example:
The code for the prompt will eventually look like this.
prompt(dataset) {
return `"### Given PostgreSQL schema:
#
# ${dataset.name.en} (${dataset.columns.map(col => col.name.en).join(', ')})
#
# Make a list of the 6 most relevant charts to visualize, as JSON:
#
# {\n# \"dashboard_title\": \"Dashboard title\",
# \"charts\": [
# {
# \"title\": \"Chart title\",
# \"type\": \"chart_type\",
# \"metric\": \"metric\",
# \"metric_aggregation\": \"aggregation\",
# \"dimension\": \"dimension\"
# }
# }
`;
}Now, let’s discuss the code for this prompt in more detail.
Generating a useful prompt is the biggest challenge here, since GPT-3 is a language model, and we want to generate a piece of structured data that our API can understand.
The clue here is to do two things.
The technology has a fairly good understanding of what JSON looks like in terms of its text model. This improves our chances of having an output our API can work with.
If you were to enter the prompt directly into the OpenAI playground, it would look like this.
### Given PostgreSQL schema
#
# IceCream{id int, ice_cream_name text, size int, flavour text, nb_purchased int, price float)
# IceCreamOrders{id int, ice_cream_id int, customer_id int, datetime datetime, location_id int)
#
# Make a list of the 6 most relevant charts to visualize, as JSON:With this prompt, chances are already realistic you’ll get valid JSON in response. However, keep in mind that GPT-3 is a language model. It doesn’t know what valid JSON is, and will simply generate something similar to JSON. That means it will generate different JSON every time you run this script.
So how do we make sure OpenAI generates JSON in our desired format?
If you’ve worked with ChatGPT or OpenAI before, you know your output gets better as you refine your prompt with more context. So to solve this challenge, we will add the structure of our JSON file to the prompt.
The prompt now looks like this.
This prompt is an example of a one-shot approach vs. the zero-shot approach we tried first.
You can now send the prompt to OpenAI.
When the response comes back from OpenAI, you can try to parse the output as JSON.
You may need to play around with the script and run it few times before ending up with a valid JSON. Below is the code to parse the JSON.
try {
json = JSON.parse(text);
}
catch (e) {
return console.log(new Date(), dataset.id, 'Result was not valid JSON :-(');
}
console.log(new Date(), dataset.id, 'OpenAI response as JSON\n', JSON.stringify(json, null, 2));💡Pro tip: We recommend logging your API calls. By logging all prompts and responses, you can debug more easily afterward. You can do this by adding the following snippet of code.
console.log(new Date(), dataset.id, 'OpenAI response', JSON.stringify(completion.data));
const text = completion.data.choices[0].text;When you’ve parsed the JSON successfully, you can use Luzmo’s dashboard builder SDK. This SDK is useful because it builds dashboards through function calls, so you can easily generate AI-powered dashboards via code based on a JSON file.
The code snippet below will do the following actions.
💡Note: In our initial prompt, we did not include which chart types are available in Luzmo. We’ve added a function to this code that will find the best chart match, based on the type of chart OpenAI has chosen. You can also choose to suggest the available chart types in your prompt instead… and hope GPT will follow your lead!
try {
// Construct the dashboard
let dashboard = new sdk.Dashboard();
dashboard.setDescription(`This is a dashboard based on the set \'${dataset.name.en}\' that was autogenerated by Cumul.io Insight Mining (v1).`);
dashboard.setName('(AI) ' + this.findTitle(json.dashboard_title));
dashboard.setTheme('bliss');
// Construct the charts
let i = 0;
for (const chart of json.charts) {
dashboard.addItem(this.composeChart(dataset, chart, i++));
}
// Create the dashboard
let cumulioDashboard = dashboard.toJSON();
cumulioDashboard.contents.views.forEach(view => {
view.options.showTitle = true;
});
await this.cumulio.create('securable', cumulioDashboard);
}
catch(e) {
return console.log(new Date(), dataset.id, 'Encountered issue while composing dashboard using SDK', e);
}
}And that’s it! You’ve now successfully created an AI-powered dashboard from scratch using only a dataset, OpenAI and Luzmo. Below, we've embedded one of our resulting dashboards, but we encourage you to try it yourself!
The script explained in this tutorial is simply an example of what is possible when you connect our two APIs. Once you know how it works, a wealth of options become available. Here are a few recommendations of how you could expand on the code.
You can play around with the prompt to personalize the resulting AI-powered dashboards. For example, ask for the 6 most relevant charts for an airline support rep vs an airline executive member.
Tell the prompt you want to use a mix of data visualizations. You can also add a fixed template in the composition layer of your code, which defines where to place certain chart types, interactive filters etc. in your dashboard. It will make data visualization with AI even more powerful!
We built this example on the Da Vinci model, but you can also use other models like GPT-4 or GPT-4o. Or, in case you are already using other AI models for your product, like Gemini Ultra or Mistral, you can streamline your workflows and hook up literally any AI API of your choice.
In this example, we’ve used a one-shot approach. You can also use embeddings to add a lot more contextual information, like information about dashboards you already have, or adding anonymized dashboard structures. With this input, OpenAI can work with training data to generate better, more complete dashboards.
Want to get started using OpenAI and Luzmo? We’ve assembled a list of resources that will help you.
Luzmo Documentation
OpenAI Developer documentation
Experience the power of Luzmo. Talk to our product experts for a guided demo or get your hands dirty with a free 10-day trial.
