This post covers a quick tutorial for adding analytics search capabilities to a React based webpage that queries Postgres database using natural language, powered by Luzmo’s embedded analytics with AI-powered insights.
Use Case: Analytics Search
Problem Statement
Data exploration and searching have always been under the technical realm, requiring a developer or technical data analyst to understand the data and build custom queries.
Realization Approach
With AI and NLP integration, non-technical users can query the data in natural language and build data visualization and reports. All they need to do is ask the question. Behind the scenes, a superintelligent data stack deciphers the data and generates instant, concise answers to any data question backed by easy-to-understand charts.
Solution Space
This approach empowers users and businesses with faster, more precise insights about their data, supercharging end-user analytics search and making them more intelligent and intuitive than ever.
Featured Analytics Platform
Luzmo is an analytics platform offering custom data apps for smarter decision making. It supports creation of tailored analytics with engaging, value-adding insights for a unified and seamless experience through analytics views embedded directly inside user’s workflows.
The code referenced in this blog post is available on the GitHub link:
Here is a glimpse of the analytics output for a natural language query with the following prompt: “Create a chart of ‘US’ cities where my website visitors are located from the last 30 days.” Below is a screenshot of the chart.
Behind the scenes, the Luzmo IQ enables this kind of natural language querying in your application. For developers which knowledge of SQL and other query languages, this may be counter intuitive. However, not everyone who needs access to data is a developer.
Luzmo IQ’s can produce data visualizations on demand. And the best part is, you can hand over the power of being a developer to anyone who is curious about the data.
Let’s understand the steps involved in building a Luzmo powered analytics search for a demo React app. To build this demo, you must be a developer with knowledge of building React based web apps.
Getting Started with Luzmo and Astro
To use Luzmo IQ, you’ll need to make a server-side authorization request which allows the client-side UI component to safely communicate with the Luzmo servers. To set this up, you can refer to the following guide. The rest of the post picks up from where this guide ends.
Adding a Dataset to Luzmo
In the getting started guide, you’ll notice the following access object has been left blank.
access: {
datasets: [
{
id: '',
rights: 'use',
},
],
}
Now, you can hook up a Postgres Database to Luzmo and use the dataset id to update the access object.
Adding a Database Connection
Before creating a dataset in Luzmo, you’ll need to add a connection. In the Luzmo dashboard, navigate to Datasets and click New connection. This example uses the Postgres database selection followed by on-screen instructions for entering the database host, database name, username and password.
Once the database connection has been established, you’ll be shown a list of available tables. In this case, there’s only one table named analytics.
With the connection now fully established you can navigate to Datasets, and select your newly created dataset. You can grab the id for the dataset from the URL in the browser.
Now that you have a dataset id, you can return to the code and update the access object. Here’s what it looks like for this demo:
access: {
datasets: [
{
id: '6f18525f-7b4f-4726-bc20-ccc4665d3091',
rights: 'use',
},
],
},
The resulting response from the authorization request contains an id and a token. Both of these will be passed on to the LuzmoClientComponent, where you have to add the LuzmoAIChatComponent React component.
Installing the LuzmoAIChatComponent
The LuzmoAIChatComponent is part of Luzmo’s react-embed package. To install it, run the following command in your terminal.
npm install @luzmo/react-embed
In the next step, the LuzmoClientComponent is updated to import and configure the LuzmoAIChatComponent.
Configuring the LuzmoAIChatComponent
Update src/components/luzmo-client-component.tsx with the following code:
// src/components/luzmo-client-component.tsx
import { LuzmoAIChatComponent } from '@luzmo/react-embed';
interface Props {
authKey: string;
authToken: string;
}
export default function LuzmoClientComponent({ authKey, authToken }: Props) {
console.log({ authKey, authToken });
return (
<section>
<LuzmoAIChatComponent
appServer={import.meta.env.PUBLIC_LUZMO_APP_SERVER}
apiHost={import.meta.env.PUBLIC_LUZMO_API_HOST}
authKey={authKey}
authToken={authToken}
options={{
showChart: true,
showConfiguration: true,
}}
/>
</section>
);
}
And that’s all there is to it! The above code will add the chat component to the page, allowing anyone with access to write queries using natural language.
Customization Option for Analytics Search Chat Prompts
The chat component offers various customization options, including welcome messages, header titles, language and timezone settings, display modes, suggestions, and feedback, all designed to enhance the end-user experience. Read the docs to see which options are available.
But that’s not all! Each response presents users with options for filtering, different chart display types, and even adjusting date ranges, providing a level of customization that’s hard to find in most standard charting libraries.
Summing Up
Adding a chat feature enables users to directly query the data they need, bypassing the usual wait time and guesswork involved in building custom data visualizations. This means developers no longer need to spend hours building hypothetical solutions. Instead, users can simply access what they know they need, on demand. It’s a whole new level of user empowerment.
This post was originally published in Luzmo.
