# Embed Spotter without ThoughtSpot UI

> For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt)

Source: https://developers.thoughtspot.com/docs/embed-spotter-agent

# Embed Spotter without ThoughtSpot UI

> **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**

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

**ES6**

```JavaScript
<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]({{navprefix}}/{{faqs}}#tsHostName) 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]({{navprefix}}/{{embed-authentication}}).
    

```JavaScript
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.

```JavaScript
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]({{navprefix}}/{{SpotterAgentEmbedViewConfig}}).

## Render the embedded object

```JavaScript
spotterAgentEmbed.render();
```

## Code sample

```JavaScript
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.
    
    ![SpotterAgentEmbed](/docs/doc-images/images/spotterAgentEmbed.png)
    
-   Type your query, click the **Send** button to prompt Spotter and generate a response.
    
    ![Spotter Agent embed query](/docs/doc-images/images/spotterAgentEmbedQuery.png)
    

## Additional resources

-   [SpotterAgentEmbed classes and methods]({{navprefix}}/{{SpotterAgentEmbed}})
    
-   [Integrate Spotter in your custom chatbot tutorial]({{navprefix}}/{{spotter-in-custom-chatbot}})
    
-   [Developer examples](https://github.com/thoughtspot/developer-examples/tree/main/visual-embed/spotter/spotter-agent-embed)