# Integrate ThoughtSpot with Vercel

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

Source: https://developers.thoughtspot.com/docs/vercel-integration

# Integrate ThoughtSpot with Vercel

If you are using Vercel to deploy and maintain your application, you can integrate your Vercel project with your ThoughtSpot application instance and easily embed ThoughtSpot content in your app. With Vercel integration, you can connect your application to ThoughtSpot data, create content for analytics, and embed it in your app.

## Before you begin

Vercel integration requires the following setup:

-   A Vercel account to which you want to install the integration
    
-   A Vercel project that can access the integration
    
-   ThoughtSpot application URL.  
    You can use your ThoughtSpot Host URL or the free trial URL.
    
-   Your user account has **Can manage Data** privilege.
    
-   To implement Trusted authentication for embedding application users, `secret_key` is required.  
    The `secret_key` is generated if `Trusted authentication` is enabled on your instance.  
    For more information, see [Secret key management]({{navprefix}}/{{trusted-auth-secret-key}}).
    
    > **NOTE:** To set up Trusted authentication for Vercel integration, Can administer ThoughtSpot (administrator) privilege is required. Note that ThoughtSpot Developer Edition does not offer Trusted Authentication. Users upgrading from Free Trial to Developer Edition may have to change the code samples slightly to use Basic authentication in the sample applications. For example, in App.js or App.tsx, replace AuthType.TrustedAuthToken with AuthType.Basic as shown here: authType: AuthType.Basic, username: TSUserName, password:'',
    

## Get started with Vercel integration

Vercel integration with ThoughtSpot includes the following steps:

-   [Install ThoughtSpot integration]({{navprefix}}/{{vercel-int}}#_step_1_install_integration)
    
-   [Connect to ThoughtSpot data]({{navprefix}}/{{vercel-int}}#_step_2_connect_to_thoughtspot_data)
    
-   [View the embed code]({{navprefix}}/{{vercel-int}}#_step_3_view_the_embedding_code)
    
-   [Set up authentication]({{navprefix}}/{{vercel-int}}#_step_4_set_up_authentication)
    
-   [Test the embed code]({{navprefix}}/{{vercel-int}}#_step_5_test_the_embed_code)
    

### Step 1: Install integration

To install integration:

1.  Log in to Vercel.
    
2.  Go to [https://vercel.com/integrations/thoughtspot-analytics](https://vercel.com/integrations/thoughtspot-analytics).
    
3.  Click **Add Integration**.
    
4.  In the **Install ThoughtSpot** pop-up, add the following details:
    
    -   Select the Vercel account in which you want to install the ThoughtSpot integration
        
    -   Select the Vercel project that you want to connect to ThoughtSpot application
        
    
5.  Click **Install**. The following screen appears.
    
    ![ThoughtSpot Login](/docs/doc-images/images/ts-vercel-login.png)
    
6.  Do one of the following:
    
    -   If you have a ThoughtSpot application instance, click **Login**.  
        
    -   If you don’t have an application instance, click **Sign up** to [sign up for a free trial](https://www.thoughtspot.com/trial) and log in to the free trial instance.
        
    
7.  Enter the URL of your ThoughtSpot instance. For example, `https://{ThoughtSpot-hostname}.thoughtspot.cloud`.  
    You can copy the URL from the address bar of Web browser, or from the account activation emails sent to your registered email address by ThoughtSpot. For more information, see [FAQs]({{navprefix}}/{{faqs}}#tsHost).
    
8.  Click **Continue**.
    
9.  Log in to your ThoughtSpot application instance with your credentials.  
    For SSO authentication, click **Sign in with SSO** and complete the authentication.  
    After you sign in, connect your Vercel project to ThoughtSpot data.
    

### Step 2: Connect to ThoughtSpot data

To continue with integration, check if your Vercel project is integrated with Postgres.

-   If Postgres is not integrated or if you don’t want to use Postgres, clear the **Use Postgres connection from the project if available** checkbox and proceed to create a Connection.
    
-   If Postgres is integrated, ThoughtSpot will automatically create a connection to the existing Postgres databases in your project.
    
    With Postgres, you can either use an existing Model available on your instance or create a Model instantaneously.
    
    Models in ThoughtSpot refer to logical representation of data and are used to model complex datasets. For more information, see [ThoughtSpot Product Documentation](https://docs.thoughtspot.com/cloud/latest/models).  
    
    -   To analyze data from an existing Model, click **Connect to existing Worksheets**.
        
    -   To create a connection and Model, click **Create a new connection**.
        
        1.  Add Tables and Columns and click **Update connection**.
            
            ThoughtSpot automatically detects joins between the selected Tables.
            
        2.  Select the association of tables you would like to run your analysis on, and then click **Continue**.
            
            ThoughtSpot will create a Model with the data set you selected.
            
        3.  Click **Continue**.
            
        
    

### Step 3: View the embed code

After you connect your Vercel project to ThoughtSpot data, test and preview your embedding. The integration displays the code snippet for embedding Natural Language Search. You can also navigate to the Stackblitz code sandbox and preview the results.

Note that at this point, the embed code doesn’t have the [authentication]({{navprefix}}/{{authentication}}) type defined. ThoughtSpot supports several authentication options such as SAML, OIDC, and Passthrough authentication to match your deployment preferences.

-   If you don’t want to set up authentication for your application users, click **Exit Setup**. ,
    
-   If you want to set up Trusted authentication, ensure that your user account has `Can administer ThoughtSpot` privilege, and then click **Next**.
    

### Step 4: Set up authentication

ThoughtSpot recommends using the [Trusted authentication]({{navprefix}}/{{trusted-authentication}}) method to seamlessly authenticate your application users and access ThoughtSpot content in your app.

1.  To set up Trusted authentication, ensure that you have the following information:
    
    -   `TS_HOST`  
        URL of your ThoughtSpot application instance.
        
    -   `TS_SECRET_KEY`  
        If Trusted authentication is enabled on your ThoughtSpot application instance, a secret key is generated. Administrators can view this secret key on the **Develop** > **Customizations** > **Security Settings** page. For more information, see [Secret key management]({{navprefix}}/{{trusted-auth-secret-key}}).
        
    
2.  If you don’t have the authentication service, click **Deploy Auth Service** to deploy using the Trusted authentication template.  
    The Vercel project configuration page opens.
    
3.  Add the values for `TS_HOST` and `TS_SECRET_KEY` under environment variables.
    
4.  Click **Deploy**.
    

### Step 5: Test the embed code

After Vercel deploys your application, the sample code in the integration page is updated with the authentication properties that you just configured.

1.  To test and preview the embed code in the Stackblitz code sandbox, click **Try in StackBlitz**.  
    You can also copy the code and use it in your embedding application.
    
2.  After verifying the code, click **Next**.
    
3.  Review the integration summary.  
    The summary page provides the following options:
    
    -   Use the sample code generated in the previous step and embed ThoughtSpot content in your app. If you have set up Trusted Authentication, the page displays the details of the authentication setup.
        
    -   If you don’t have an app to embed ThoughtSpot content, you can [deploy a demo app in Vercel]({{navprefix}}/{{vercel-int}}#_deploy_thoughtspot_demo_app_in_vercel) and view the embedded content.
        
    -   Navigate to your ThoughtSpot application instance.
        
    
4.  To complete the installation, click **Finish Setup**.  
    
5.  To view the integration details at any time:
    
    1.  Log in to your Vercel account.
        
    2.  Go to the Vercel project in which the ThoughtSpot integration is installed.
        
    3.  Click **Manage**.  
        The ThoughtSpot integration page appears.
        
        ![ThoughtSpot integration](/docs/doc-images/images/ts-integration-config.png)
        
    4.  To view the integration details, click **Configure**.
        
    5.  To install ThoughtSpot integration in another Vercel project, click **Manage** and add the project.
        
    

##### Deploy ThoughtSpot demo app in Vercel

If you don’t have the application setup to embed ThoughtSpot content, you can use the ThoughtSpot demo app. The demo app allows you to load data and view embedded content.

To deploy the demo app:

1.  In the ThoughtSpot integration summary page, click **Don’t have an application? Deploy the ThoughtSpot Demo App**.  
    The environment variables required to set up the demo app are displayed. Copy the variable values.
    
2.  Click **Deploy Demo App**.
    
3.  In the Vercel app deployment page, go to **Configure Project** > **Required Environment Variables**.
    
4.  Add the values copied from the Vercel integration page.
    
5.  Click **Deploy**.
    
6.  After the app is deployed, click the app to view the embedded pages in the demo app.
    

## Remove integration

To remove ThoughtSpot integration from your Vercel project:

1.  Go to the Vercel project in which the ThoughtSpot integration is installed.
    
2.  Click **Manage**. The ThoughtSpot integration page opens.
    
3.  Scroll down to the **Uninstall** section and click **Remove Integration**.