Embed Spotter Agent

Table of Contents

Before you begin
Import the SDK package
Initialize the SDK
Create an instance of the SpotterEmbed object
Customization controls for the embed view (Optional)
Render the embedded object
Code sample
Test your embed
Additional resources

Spotter Agent is an embeddable AI analyst component from ThoughtSpot that enables you to integrate natural language data search and conversation analytics into your own application. Unlike the standard Spotter embed, which provides a ready-made search bar and interface, Spotter Agent is designed for deeper integration and customization. It allows you to build your own UI or agent experience, route user questions to ThoughtSpot, and receive structured answers and visualizations, allowing full control over the look, feel, and workflow of the embedded analytics experience.

Before you begin🔗

Before you begin, check the following:

You have a ThoughtSpot instance with Spotter Agent enabled.
You have access to the latest version of the Visual Embed SDK or at least v1.33.1.
Your host application domain is added to ThoughtSpot CSP and CORS allowlists.

Import the SDK package🔗

Import the SpotterEmbed SDK library to your application environment:

npm

import {
    SpotterAgentEmbed,
    AuthType,
    init,
    prefetch,
}
from '@thoughtspot/visual-embed-sdk';

ES6

<script type = 'module'>
    import {
        SpotterAgentEmbed,
        AuthType,
        init,
        prefetch,
    }
from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/index.js';

Initialize the SDK🔗

To initialize the SDK, the following information is required:

thoughtSpotHost
The hostname of your ThoughtSpot application instance. See FAQs to know how to find the hostname of your application instance.
authType
Authentication type. ThoughtSpot supports a variety of Authentication types. For testing purposes, you can use AuthType.None. For other authentication options, see Authentication.

init({
    thoughtSpotHost: 'https://your-thoughtspot-host', // Replace with your ThoughtSpot application URL
    authType: AuthType.None,
});

Create an instance of the SpotterEmbed object🔗

Create an instance of the SpotterEmbed object and specify the data source ID. Optionally, you can specify the search query string to generate a chart or table at load time.

const spotterAgentEmbed = new SpotterAgentEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    worksheetId: '<%=datasourceGUID%>', // ID of the data source object to query data
});

Customization controls for the embed view (Optional)🔗

The embed package for Spotter includes the additional configuration flags to customize the Spotter Agent. Spotter Agent includes only the AI search experience with the Search bar by default. The interface design and styling is controlled by your host app. However, the SDK provides a few controls to customize search experience and app interactions.

For more information, see the following pages:

SpotterAgentEmbedConfig for embed view customization properties
Action customization framework to show or hide actions on the Answers generated from the query
Event handlers for host and embed app interaction
Style customization framework to customize style, text strings, and icons in the embedded view.

Render the embedded object🔗

spotterAgentEmbed.render();

Code sample🔗

import { SpotterAgentEmbed, AuthType, init } from '@thoughtspot/visual-embed-sdk';

// Initialize the SDK
init({
    thoughtSpotHost: 'https://your-thoughtspot-host', // Replace with your ThoughtSpot application URL
    authType: AuthType.None, // Use the appropriate AuthType for your setup
});

// Create and render the SpotterAgentEmbed
const spotterAgentEmbed = new SpotterAgentEmbed('#ts-spotter-agent', {
  frameParams: {
    height: '600px',
    width: '100%',
  },
   worksheetId: "your-worksheet-id", // ID of the data source object (Model) to query data
  // Optionally, you can set other configuration options here
  // Add event listeners
});

spotterAgentEmbed.render();

Test your embed🔗

Load the embedded object.
If the embedding is successful, you’ll see the Spotter search panel at the bottom of the page.
Type your query, click the Send button to prompt Spotter and generate a response.