Class: AnalyticsAgent

A web component for embedding an Analytics and Visualization agent.

The AnalyticsAgent helps users see and understand data with conversational analytics. It generates natural language insights, visualizations, and proactive alerts in your flow of work.

The agent supports two operating modes:

  • Single-context mode: Provide contextConfig in AgentProps to track a single analytics asset (dashboard, metric, or semantic model).
  • Multi-component mode: Omit contextConfig to automatically track all embedded AnalyticsDashboard and AnalyticsMetric components on the page.

Use AgentStyleTokens to theme the agent UI to match your application’s look and feel.

MethodsAccessorsProperties

Extends 

  • AnalyticsComponent

Constructors 

new AnalyticsAgent() 

new AnalyticsAgent(props): AnalyticsAgent

The constructor for AnalyticsAgent.

Parameters 

props: AgentProps

The initialization properties for the agent component.

Returns 

AnalyticsAgent

Usage 

1//JavaScript
2//Importing required modules and libraries from the Tableau Next Embedding SDK
3import {
4  initializeAnalyticsSdk,
5  AnalyticsAgent,
6  AgentContextType,
7  analyticsEventTarget,
8  EventName,
9} from "@salesforce/analytics-embedding-sdk";
10
11analyticsEventTarget.addEventListener(EventName.ERROR, (errorEvent) => {
12  //Listening to global ERROR event, such as SDK or component initialization failures.
13  console.log("Received a global error event", errorEvent); //Error details, such as error code and message, are available in the event object
14});
15
16await initializeAnalyticsSdk({
17  //Configuration object for initializing the Tableau Next Embedding SDK
18  authCredential: "<%- authCredential %>", //The frontdoor URL required for authentication
19  orgUrl: "<%- org-url %>", //The Salesforce org URL that hosts the Analytics component to embed.
20});
21
22// Single-context mode: provide contextConfig to track a specific asset
23const analyticsAgent = new AnalyticsAgent({
24  parentIdOrElement: "<%- parent-element %>", //The parent ID or element to render the component in
25  idOrApiName: "<%- agent-id %>", //The ID of the agent to embed
26  contextConfig: {
27    //Optional context configuration for single-context mode
28    contextType: AgentContextType.DASHBOARD, //The type of the asset to configure the agent for
29    contextTypeIdOrApiName: "<%- asset-id-or-api-name %>", //The ID or API name of the asset
30  },
31});
32
33analyticsAgent.render(); //Renders the agent in the parent HTML element
1// Multi-component mode: omit contextConfig to automatically track all embedded analytics components
2const agent = new AnalyticsAgent({
3  parentIdOrElement: "<%- parent-element %>",
4  idOrApiName: "<%- agent-id %>",
5  showHeader: true,
6  showHeaderActions: true,
7  agentName: "Sales Insights",
8  welcomeText: "Ask me anything about your sales data.",
9});
10
11agent.render();
1//TypeScript
2//Importing required modules and libraries from the Tableau Next Embedding SDK
3import {
4      AnalyticsAgent,
5      AgentContextType,
6      initializeAnalyticsSdk,
7      analyticsEventTarget,
8      EventName,
9      type AgentProps,
10      type AnalyticsSdkConfig
11} from '@salesforce/analytics-embedding-sdk';
12
13analyticsEventTarget.addEventListener(EventName.ERROR, (errorEvent) => {		//Listening to global ERROR event, such as SDK or component initialization failures.
14		console.log("Received a global error event", errorEvent)				//Error details, such as error code and message, are available in the event object
15});
16
17const config: AnalyticsSdkConfig = {					//Configuration object for initializing the Tableau Next Embedding SDK
18 authCredential: "<%- authCredential %>",					//The frontdoor URL required for authentication
19 orgUrl: "<%- org-url %>"							//The Salesforce org URL that hosts the Analytics component to be embedded.
20};
21await initializeAnalyticsSdk(config);				//Initializes the Tableau Next Embedding SDK with the provided configuration and returns a promise that resolves on successful initialization.
22
23const agentProps: AgentProps = {
24     parentIdOrElement: '<%- parent-element %>',
25     idOrApiName: '<%- agent-id %>',
26     contextConfig: {
27         contextType: AgentContextType.METRIC,
28         contextTypeIdOrApiName: '<%- asset-id-or-api-name %>'
29     },
30     showHeader: true,
31     showHeaderActions: true,
32     agentName: 'Revenue Insights',
33     welcomeText: 'Ask me about your revenue metrics.'
34};
35
36const analyticsAgent: AnalyticsAgent = new AnalyticsAgent(agentProps);
37
38analyticsAgent.addEventListener(EventName.ERROR, (event) => {			//Listening to component specific ERROR event
39		console.log("Received error", event);									//Error details (such as error code and message) are available in the event object
40	});
41
42analyticsAgent.addEventListener(EventName.COMPONENT_LOADED, () => {			//Listening to COMPONENT_LOADED event triggered when the component gets loaded
43		console.log("Component Loaded");
44	});
45
46analyticsAgent.render();     					//Renders the agent in the parent HTML element

Multi-org Usage 

In multi-org scenarios, always specify the orgUrl parameter when creating components:

1// After initializing SDK with multiple orgs
2const agent1 = new AnalyticsAgent({
3  parentIdOrElement: "container1",
4  idOrApiName: "Agent1",
5  contextConfig: {
6    contextType: AgentContextType.DASHBOARD,
7    contextTypeIdOrApiName: "Dashboard1",
8  },
9  orgUrl: "https://org1.lightning.force.com", // Required in multi-org
10});
11
12const agent2 = new AnalyticsAgent({
13  parentIdOrElement: "container2",
14  idOrApiName: "Agent2",
15  contextConfig: {
16    contextType: AgentContextType.METRIC,
17    contextTypeIdOrApiName: "Metric1",
18  },
19  orgUrl: "https://org2.lightning.force.com", // Required in multi-org
20});

Note: The orgUrl parameter must be a Lightning URL (e.g., https://yourorg.lightning.force.com), not the my.salesforce.com domain URL. All methods of the component operate on the org specified by this orgUrl.

Overrides 

AnalyticsComponent.constructor

Properties 

parentIdOrElement 

parentIdOrElement: string | HTMLElement

This ID of the container or the container where the analytics component is embedded.

Inherited from 

AnalyticsComponent.parentIdOrElement

Accessors 

componentType 

get componentType(): string

Returns the component type: agent.

Returns 

string

Overrides 

AnalyticsComponent.componentType


height 

get height(): string

The height for the component, in CSS units. Acceptable string formats include:

  • Pixel values (e.g., “800px”)
  • Percentages (e.g., “100%”)
  • Relative units (e.g., “2rem”, “1.5em”)
  • Other valid CSS height values. If an invalid value is provided, the value defaults to 100%.

set height(val): void

Parameters 

val: string

Returns 

string

  • Returns the height of the component.

Inherited from 

AnalyticsComponent.height


idOrApiName 

get idOrApiName(): string

The ID or API name used to identify the Tableau Next component.

set idOrApiName(val): void

Parameters 

val: string

Returns 

string

  • Returns the ID or API name of the component to embed.

Inherited from 

AnalyticsComponent.idOrApiName


orgUrl 

get orgUrl(): undefined | string

The org URL for the component.

Multi-org Note: In multi-org scenarios, this property identifies which org the component belongs to. Returns a Lightning URL (e.g., https://yourorg.lightning.force.com).

set orgUrl(val): void

Parameters 

val: string

Returns 

undefined | string

The org URL, or undefined if not set.

Inherited from 

AnalyticsComponent.orgUrl


width 

get width(): string

The width for the component, in CSS units. Acceptable string formats include:

  • Pixel values (e.g., “800px”)
  • Percentages (e.g., “100%”)
  • Relative units (e.g., “2rem”, “1.5em”)
  • Other valid CSS width values. If an invalid value is provided, the value defaults to 100%.

set width(val): void

Parameters 

val: string

Returns 

string

  • Returns the width of the component.

Inherited from 

AnalyticsComponent.width

Methods 

reload() 

reload(): Promise<void>

Reloads the component to retrieve the latest data from the server.

Returns 

Promise<void>

  • A promise that resolves when reload is complete.

Async 

Inherited from 

AnalyticsComponent.reload


render() 

render(): Promise<string>

Renders the component by appending it to the specified parent element.

Returns 

Promise<string>

A promise that resolves when the component is loaded successfully, or rejects with an error message if the loading fails.

Inherited from 

AnalyticsComponent.render


startNewAgentSession() 

startNewAgentSession(): Promise<void>

Starts a new session for the agent, clearing the current session history. This is useful for resetting the agent context when the user navigates to a different part of your application.

Returns 

Promise<void>

A promise that resolves when a new session is created.

Example 

1const analyticsAgent = new AnalyticsAgent({
2  parentIdOrElement: "<%- parent-element %>",
3  idOrApiName: "<%- agent-id %>",
4  contextConfig: {
5    contextType: AgentContextType.DASHBOARD,
6    contextTypeIdOrApiName: "<%- asset-id-or-api-name %>",
7  },
8});
9
10await analyticsAgent.render();
11
12// Start a fresh agent session, clearing conversation history
13await analyticsAgent.startNewAgentSession();