Luzmo IQ

Introduction

Luzmo IQ allows you to generate AI-powered answers to data-related questions.

You can use the embedding libraries to integrate Luzmo IQ into any webpage using our pre-made UI components. Follow the guide below to embed a fully functional IQ chat component in your application, allowing users to ask questions about their data.

Alternatively, if you only want to display AI responses, you can use our pre-built IQ answer component, which includes full chart configuration functionalities as well as feedback or suggested chart actions mechanisms.

Chat component

The most efficient way to leverage Luzmo IQ is with our IQ chat component. This component enables you to embed a fully functional, AI-powered chat interface into your application. It requires a minimal amount of code, but offers extensive customization options, allowing you to tailor the chat experience to your specific needs.

Installation instructions

1. Run the command corresponding to the choice of framework you prefer.

npm install @luzmo/embed

Basic usage

import '@luzmo/embed';

<script type="module">
  import './node_modules/@luzmo/embed/index.js';
</script>
<!-- OR -->
<script type="module" src="./node_modules/@luzmo/embed/index.js"></script>

<!--
Clients on our US multi-tenant application environment,
or a dedicated instance on a specific VPC, should specify:
- appServer="https://app.us.luzmo.com/" (or your VPC-specific address)
- apiHost="https://api.us.luzmo.com/" (or your VPC-specific address)
-->
<luzmo-iq-embed-chat
  appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
  apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
  authKey="< Embed key >"
  authToken="< Embed token >"
  options="< Component customization options >"
></luzmo-iq-embed-chat>

Answer component

If a full chat interface is not required, you can use our IQ answer component to display AI-generated responses through our API.

Depending on your customization settings, this component allows users to interact with charts via a configuration panel, chart actions, or other interactive options.

Installation instructions

1. Run the command corresponding to the choice of framework you prefer.

npm install @luzmo/embed

Basic usage

import '@luzmo/embed';

<script type="module">
  import './node_modules/@luzmo/embed/index.js';
</script>
<!-- OR -->
<script type="module" src="./node_modules/@luzmo/embed/index.js"></script>

<!--
Clients on our US multi-tenant application environment,
or a dedicated instance on a specific VPC, should specify:
- appServer="https://app.us.luzmo.com/" (or your VPC-specific address)
- apiHost="https://api.us.luzmo.com/" (or your VPC-specific address)
-->
<luzmo-iq-embed-answer
  appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
  apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
  authKey="< Embed key >"
  authToken="< Embed token >"
  options="< Component customization options >"
  messages="< Array of messages to display, following the structure of the IQMessage interface >"
></luzmo-iq-embed-answer>

Customization

Chat component

By default, the IQ chat component will be displayed as a full page chat with default theme. You can customize the display and functionality of the component in detail by setting the options property.

For example, to display the chat as a popover widget with default position of the action button on the bottom right of the screen, you can configure the options property as follows:

<luzmo-iq-embed-chat
  appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
  apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
  authKey="< Embed key >"
  authToken="< Embed token >"
  options='{
    "displayMode": "chatWidget"
  }'>
</luzmo-iq-embed-chat>

View all available options in the component reference .

Answer component

By default, the IQ Answer component displays AI responses in both chart and text summary formats. You can customize its display and functionality using the options property.

Note: Responses returned from our API are sent in chunks, so you will need to process these chunks into complete messages before passing them to the component.

For instance, to show only text summaries, configure the options property as follows:

<luzmo-iq-embed-answer
  appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
  apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
  authKey="< Embed key >"
  authToken="< Embed token >"
  messages="< Array of messages to display, following the structure of the IQMessage interface >"
  options='{
    "responseMode": "text"
  }'>
</luzmo-iq-embed-answer>

This configuration will display AI responses exclusively as text summaries.

View all available options in the component reference .

CSS variables

You can further customize the IQ components by setting or overriding the CSS variables.

To make the IQ component styling more consistent with your brand, the first styles you'd likely want to override are the colors of the user's chat messages and chat widget background.

You can override these CSS variables as follows:

/* Override the user's chat message color and chat bubble background color */
luzmo-iq-embed-chat {
  --luzmo-iq-chat-user-message-color: #ff0000;
  --luzmo-iq-chat-widget-background: #bf05b8
}

These are only two of many CSS variables you can override. View the full list in the component reference .