Embed Spotter without ThoughtSpot UI

Table of Contents

Using SpotterAgentEmbed component
- Import the SDK package
- Initialize the SDK
Create an instance of the SpotterAgentEmbed object
Customization controls for the embed view (Optional)
Render the embedded object
Code sample
Test your embed
Additional resources

Important

The SpotterAgentEmbed component will be deprecated in an upcoming version. If you want to use Spotter capabilities with your own UI or agentic experience, ThoughtSpot recommends using the Spotter MCP Server. For more information, see Integrating Spotter MCP Server in a custom application or chatbot.

SpotterAgentEmbed lets you integrate Spotter’s AI analytics into your own chat interface without rendering any ThoughtSpot UI. Unlike SpotterEmbed, which embeds the full Spotter experience in your app, SpotterAgentEmbed gives you full control over the chat layout, message flow, and design, so you can build a branded chatbot or conversational application while ThoughtSpot handles the analytical processing behind the scenes.

Using SpotterAgentEmbed component🔗

Before you begin embedding Spotter prompt panel using SpotterAgentEmbed component,

Add the URL of the host application, which embeds ThoughtSpot visualizations, to the CSP allowlist. This includes adding the correct CORS and frame-ancestors CSP.
Configure the authentication scheme that works best for your use case.

Import the SDK package🔗

Import the SpotterAgentEmbed 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';
</script>

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 SpotterAgentEmbed object🔗

Create an instance of the SpotterAgentEmbed object and specify the data source ID. Optionally, 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 SDK supports limited customization controls when you embed using the SpotterAgentEmbed component. For information about the available interface customization settings, see SpotterAgentEmbedViewConfig.

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
  // Other config attributes
});

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.