How to Build an AI Powered Analytics Search With Luzmo IQ

In this post, I’ll show you how I added Luzmo IQ to an Astro site and hooked it up to a Postgres database to capture analytics data about visitors to my site. 

You can see all the code referenced in this blog post on the link below:

• https://github.com/luzmo-official/luzmo-iq-tutorial 

I queried Luzmo IQ using 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 it created for me! 

‍

‍

Later in the post, I'll explain how you can use Luzmo IQ to enable natural language querying in your application, but first, I'd like to talk a little about why you’d want to use AI.

Let’s just back up a bit. I’m a developer, I know SQL and have carefully optimized my queries and hand crafted the visualizations seen on my /dashboard, because I know “ahead of time” what data is available, and how I want to display it. 

However, not everyone who needs access to data is a developer.

Luzmo IQ’s superpower is that it can produce the same kind of data visualizations on demand. 

With Luzmo IQ, you can hand over the power of being a developer to anyone who can type. Whenever they want to know something about a data source, all they need to do is ask the question. 

Genius stuff, so let's see how it works. 

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. In the following guide, I've explained how you can get going, and in the rest of this post I'll pick up where this guide ends. 

• Using Luzmo for Data Visualization in Astro A Set-up Guide 

Adding a Dataset to Luzmo

In the getting started guide, you’ll notice the following access object has been left blank.

  access: {
    datasets: [
      {
        id: '<dataset_id>',
        rights: 'use',
      },
    ],
  }

In this next step, I'll show you how you can hook up a Postgres Database to Luzmo and use the dataset id to update the access object. 

Adding a 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. For my example, I selected Postgres and then followed the on-screen instructions that asked for 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 my 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 mine now looks like:

  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 we’ll  add the LuzmoAIChatComponent React component, which I'll explain next. 

Installing the LuzmoAIChatComponent

The LuzmoAIChatComponent is part of Luzmo’s react-embed package. To install it, run the following in your terminal. 

npm install @luzmo/react-embed

In the next step, we’ll update the LuzmoClientComponent and 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. 

Options

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.

Finished

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.

If you want to know more, book a free demo.